vue设置导航栏 顶部栏为公共页面
首先全局引入需要的两个组件
import LeftSide from '@/components/leftSide/index';
import CrmHeader from '@/components/crmHeader/index'；
Vue.component('LeftSide',LeftSide);
Vue.component('CrmHeader',CrmHeader);然后在MainApp.vue中添加如下代码
<!-- 实际运用场景中，登录注册页面我们不希望出现，所以用keep-alive结合$route.meta来实现这个功能 -->
<div v-if="$route.meta.keepAlive">
<LeftSide></LeftSide>
<CrmHeader></CrmHeader>
</div>在router.js，用meta控制显示
{
name: 'home',
path: '/home',
component: Home,
meta:{
// true: 侧边栏与顶部栏显示 false: 不显示
keepAlive: true
}
}vue实现顶部导航栏设计
效果图
完整代码：
<template>
<div class="title">
<div class="title-left">
<div class="title-left-image"></div>
<router-link to="/unusedOrder">
<span class="">导航一</span>
</router-link>
<router-link to="/usedOrder">
<span class="">导航二</span>
</router-link>
<router-link to="/usedOrder">
<span class="">导航三</span>
</router-link>
<router-link to="/advices">
<span class="">导航四</span>
</router-link>
<router-link to="/evaluate">
<span class="">导航五</span>
</router-link>
</div>
<div>
</div>
<div class="serch">
<div contenteditable class="inputType" placeholder='请输入文字'></div>
<div class="button">搜索</div>
</div>
<div class="title-right">
<div class="title-right-image"></div>
<router-link to="/unusedOrder">
<span class="">导航六</span>
</router-link>
<router-link to="/usedOrder">
<span class="">导航七</span>
</router-link>
<router-link to="/advices">
<span class="">导航八</span>
</router-link>
</div>
</div>
</template><script>
export default {
name:'Title',
}
</script>
<style>
.title{
margin-left: 0px;
height: 48px;
width: 100%;
background-color:#fff;
border-bottom: 1px solid #DCDCDC;
display: flex;
justify-content:space-between;
}
.title-left{
width: 580px;
height: 48px;
margin-left: 0;
background:#fff;
display: flex;
}
.title-left-image{
height: 48px;
width:120px
}
span{
font-size: 16px
}
a{
width: 70px;
height: 48px;
color: black;
margin: 0px 10px;
text-decoration: none;
line-height: 48px;
text-align: center
}
a:hover{
background-color: #BEBEBE;
}
.serch{
height: 32px;
width: 500px;
background-color:#fff;
margin: auto;
display: flex;
}
.inputType{
width:400px;
height: 30px;
text-indent: 1em;
line-height: 34px;
background-color: #fff;
border: 1px solid black;
border-top-left-radius: 17px;
border-bottom-left-radius: 17px;
font-size: 12px;
}
.inputType:focus{
outline: none;
border: 1px solid rgb(230, 32, 213);
}
.button{
color: #fff;
text-align: center;
background: rgba(204, 51, 0, 1);
border-left:1px solid rgba(0, 0, 0, 0.45);
width:100px;
height: 32px;
line-height: 34px;
border-top-right-radius: 18px;
border-bottom-right-radius: 18px
}
.title-right{
width: 380px;
height: 48px;
display: flex;
}
.title-right-image{
width: 40px;
height: 40px;
border: 1px solid black;
border-radius: 20px;
margin: auto ;
margin-left: 40px;
}
</style>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
