【Vue.js】vue-router實現(xiàn)二級導(dǎo)航切換路由及高亮顯示

blair 發(fā)布于2019-08-23 18:33 / 3626人閱讀

摘要：這里以網(wǎng)易云音樂作為示例，效果圖我們先一層一層寫導(dǎo)航先設(shè)計第一層設(shè)計導(dǎo)航頁面樣式第一個導(dǎo)航頁面為發(fā)現(xiàn)第二個導(dǎo)航頁面為其余代碼一樣，注意要把改為相應(yīng)路由配置路由使用制作導(dǎo)航我們創(chuàng)建一個新組件把他插入到中設(shè)計好路由的數(shù)據(jù)源發(fā)現(xiàn)音樂我的

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

我們先一層一層寫導(dǎo)航
先設(shè)計第一層
1.設(shè)計導(dǎo)航頁面樣式
第一個導(dǎo)航頁面為Discover

Discover.vue：

第二個導(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：

       
            
             {{item.name}}

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

4.單頁面多路由區(qū)域操作
我們在App.vue中加入

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

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

那我們?nèi)绾卧O(shè)置默認選項并未其設(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屬性賦給每一個

元素
也就是說只有當(dāng)前頁面的

元素才會被加載active樣式
這里注意vue中的屬性如果要以變量設(shè)置
必須要寫成 v-bind:屬性名]="[屬性值]"的形式

  
     {{item.name}}

下面我們設(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)航的