快捷導(dǎo)航

vue如何將導(dǎo)航欄、頂部欄設(shè)置為公共頁面

更新時(shí)間：2023年01月13日 15:28:49 作者：懷中貓@j

這篇文章主要介紹了vue如何將導(dǎo)航欄、頂部欄設(shè)置為公共頁面問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue設(shè)置導(dǎo)航欄頂部欄為公共頁面

首先全局引入需要的兩個(gè)組件

import LeftSide from '@/components/leftSide/index';
import CrmHeader from '@/components/crmHeader/index'；
Vue.component('LeftSide',LeftSide);
Vue.component('CrmHeader',CrmHeader);

然后在MainApp.vue中添加如下代碼

<!-- 實(shí)際運(yùn)用場(chǎng)景中，登錄注冊(cè)頁面我們不希望出現(xiàn)，所以用keep-alive結(jié)合$route.meta來實(shí)現(xiàn)這個(gè)功能 -->
<div v-if="$route.meta.keepAlive">
?? ?<LeftSide></LeftSide>
? ? <CrmHeader></CrmHeader>
</div>

在router.js，用meta控制顯示

{
? ? name: 'home',
? ? path: '/home',
? ? component: Home,
? ? meta:{
? ? ? // true: 側(cè)邊欄與頂部欄顯示 false: 不顯示
? ? ? keepAlive: true
? ? }
}

vue實(shí)現(xiàn)頂部導(dǎo)航欄設(shè)計(jì)

效果圖

完整代碼：

<template>
    <div class="title">
        <div class="title-left">
            <div class="title-left-image"></div>
            <router-link to="/unusedOrder">
　　             <span class="">導(dǎo)航一</span>
           </router-link>
           <router-link to="/usedOrder">
           　　<span class="">導(dǎo)航二</span>
           </router-link>
              <router-link to="/usedOrder">
           　　<span class="">導(dǎo)航三</span>
           </router-link>
           <router-link to="/advices">
           　　<span class="">導(dǎo)航四</span>
           </router-link>
           <router-link to="/evaluate">
           　　<span class="">導(dǎo)航五</span>
           </router-link>
        </div>
       <div>
       </div>
       <div class="serch">
         <div contenteditable class="inputType" placeholder='請(qǐng)輸入文字'></div>
        <div class="button">搜索</div>
       </div>
       <div class="title-right">
           <div class="title-right-image"></div>
           <router-link to="/unusedOrder">
　　             <span class="">導(dǎo)航六</span>
           </router-link>
           <router-link to="/usedOrder">
           　　<span class="">導(dǎo)航七</span>
           </router-link>
           <router-link to="/advices">
           　　<span class="">導(dǎo)航八</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>