这里以网易云音乐作为示例，效果图：
我们先一层一层写导航
先设计第一层
1.设计导航页面样式
第一个导航页面为Discover
Discover.vue：
<!-- -->
<template>
<div>
发现
</div>
</template><script>
export default {
name: "discover",
data() {
return {
};
}
};
</script>
<style scoped>
</style>
第二个导航页面为Mymusic
其余代码一样，注意要把name改为相应路由
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制作导航
我们创建一个新组件Guide.vue,把他插入到app.vue中
设计好路由的数据源：
guides:[
{
id:0,
name:'发现音乐',
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：是我们的导航路径，要填写的是你在router/index.js文件里配置的path值
4.单页面多路由区域操作
我们在App.vue中加入<router-view>
<template>
<div id="app">
<Guide></Guide>
<router-view/>
