这里以网易云音乐作为示例，效果图：
我们先一层一层写导航
先设计第一层
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/> </div> </template>
<router-view>区域通过配置路由的js文件，来操作这些区域的内容
设计好样式后，我们可以发现我们的页面上出现了导航
那我们如何设置默认选项并未其设置样式呢？
先定义一个定义当前页面的变量：
guidecurrent:0
设置选中样式：
.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>元素
也就是说只有当前页面的<li>元素才会被加载active样式
这里注意vue中的属性如果要以变量设置
必须要写成 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>
下面我们设计二级导航
5.二级导航页面样式
与上面相同，我们创建两个.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.配置二级导航的<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>
这时我们发现我们的二级导航已经出现了
同样，设置当前页面的变量，利用class变量以及三元表达式，实现功能
至此，我们的vue-router实现的二级导航就实现了
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对亿速云的支持。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
