vue-router二級導(dǎo)航切換路由及高亮顯示的實現(xiàn)方法

更新時間：2019年07月10日 08:37:56 作者：無錫肖奈

這篇文章主要給大家介紹了關(guān)于vue-router二級導(dǎo)航切換路由及高亮顯示的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧

這里以網(wǎng)易云音樂作為示例，效果圖：

我們先一層一層寫導(dǎo)航

先設(shè)計第一層

1.設(shè)計導(dǎo)航頁面樣式

第一個導(dǎo)航頁面為Discover

Discover.vue：

<!-- -->
<template>
 <div>
 發(fā)現(xiàn)
 </div>
</template>


<script>
export default {
 name: "discover",
 data() {
 return {
 };
 }
};
</script>
<style scoped>
</style>

第二個導(dǎo)航頁面為Mymusic

其余代碼一樣，注意要把name改為相應(yīng)路由

name: "mymusic"

2.配置路由

index.js：

import DisCover from '@/components/DisCover'
import MyMusic from '@/components/MyMusic'
……

 routes: [
 {
  path: '/discover',
  name: 'discover',
  component: DisCover
 },
 {
  path: '/mymusic',
  name: 'mymusic',
  component: MyMusic
 }
 ]

3.使用router-link制作導(dǎo)航

我們創(chuàng)建一個新組件Guide.vue,把他插入到app.vue中

設(shè)計好路由的數(shù)據(jù)源：

 guides:[
  {
   id:0,
   name:'發(fā)現(xiàn)音樂',
   link:'/discover'
  },{
   id:1,
   name:'我的音樂',
   link:'/mymusic'
  },
  {
   id:2,
   name:'朋友',
   link:'friend'
  },
  {
   id:3,
   name:'商城',
   link:'mall'
  },
  {
   id:4,
   name:'音樂人',
   link:'musician'
  },
  {
   id:5,
   name:'下載客戶端',
   link:'download'
  }
  ]

Guide.vue：

  <ul class="nav nav-pills main-nav">
   <li v-for="(item,index) in guides" :key="index" role="presentation"
   :class="item.id==guidecurrent?'guide-active':''"
    >
    <router-link :to="item.link">{{item.name}}</router-link>
    </li>
   
   </ul>

to：是我們的導(dǎo)航路徑，要填寫的是你在router/index.js文件里配置的path值

4.單頁面多路由區(qū)域操作

我們在App.vue中加入<router-view>

<template>
 <div id="app">
 <Guide></Guide>
 <router-view/>
 </div>
</template>

<router-view>區(qū)域通過配置路由的js文件，來操作這些區(qū)域的內(nèi)容

設(shè)計好樣式后，我們可以發(fā)現(xiàn)我們的頁面上出現(xiàn)了導(dǎo)航

那我們?nèi)绾卧O(shè)置默認(rèn)選項并未其設(shè)置樣式呢？
先定義一個定義當(dāng)前頁面的變量：

guidecurrent:0

設(shè)置選中樣式：

.guide-active{
 background: black;
}

.guide-active::after {
 content: "◢◣";
 font-size: 8px;
 position: absolute;
 color: rgb(182, 15, 15);
 top: 87%;
 left: 50%;
 transform: translate(-10px, -5px);
}

通過v-bind屬性將class屬性賦給每一個<li>元素

也就是說只有當(dāng)前頁面的<li>元素才會被加載active樣式

這里注意vue中的屬性如果要以變量設(shè)置

必須要寫成 v-bind:屬性名]="[屬性值]"的形式

 <li v-for="(item,index) in guides" :key="index" role="presentation"
  :class="item.id==guidecurrent?'guide-active':''"
   >
  <router-link :to="item.link">{{item.name}}</router-link>
 </li>

下面我們設(shè)計二級導(dǎo)航

5.二級導(dǎo)航頁面樣式

與上面相同，我們創(chuàng)建兩個.vue頁面

Rank.vue和Recommend.vue

6.配置路由

index.js

routes: [
 {
  path: '/discover',
  name: 'discover',
  component: DisCover,
  children:[
  {path:'rec',component:reccommend},
  {path:'rank',component:rank},
  ]
 },
 {
  path: '/mymusic',
  name: 'mymusic',
  component: MyMusic
 }
 ]

6.配置二級導(dǎo)航的<router-link>

 <ul class="nav nav-pills">
  <li role="presentation" v-for="(item,index) in guides" :key="index"
   :class="item.id==discovercurrent?'active':''"
  >
   <router-link :to="item.id">{{item.name}}</router-link>
  </li>
  </ul>

這時我們發(fā)現(xiàn)我們的二級導(dǎo)航已經(jīng)出現(xiàn)了