這里以網(wǎng)易云音樂作為示例，效果圖：
我們先一層一層寫導(dǎo)航
先設(shè)計(jì)第一層
1.設(shè)計(jì)導(dǎo)航頁面樣式
第一個(gè)導(dǎo)航頁面為Discover
Discover.vue：
<!-- --><template> <div> 發(fā)現(xiàn) </div></template><script>export default { name: "discover", data() { return { }; }};</script><style scoped></style>第二個(gè)導(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)建一個(gè)新組件Guide.vue,把他插入到app.vue中
設(shè)計(jì)好路由的數(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è)計(jì)好樣式后，我們可以發(fā)現(xiàn)我們的頁面上出現(xiàn)了導(dǎo)航
那我們?nèi)绾卧O(shè)置默認(rèn)選項(xiàng)并未其設(shè)置樣式呢？
先定義一個(gè)定義當(dāng)前頁面的變量：
guidecurrent:0
設(shè)置選中樣式：