vue-router二次导航切换路线和高亮的实现方法

这里以网易云音乐为例，效果图：

我们先一层一层写导航

先设计第一层

1.设计导航页面样式

第一个导航页面是发现

Discover.vue:

！-template div discovery/div/templatescriptexportdefault { name : ' discover '，data(){ return }；}};/scriptstyle作用域/style第二个导航页面是Mymusic

其余代码相同，注意将名称改为对应的路由

名称：“我的音乐”2。配置路由

index.js:

从“@/components/DisCover”导入DisCover“从“@/components/MyMusic导入my music”……routes :[{ path : '/DisCover '，name: 'discover '，Component : discover}，{path :'/mymusic '，name :' mymusic '，component : mymusic}] 3。使用路由器链接进行导航

我们创建了一个新的组件Guide.vue，并将其插入app.vue

设计路由数据源：

指南： [{id:0，name:' discover music '，link:'/discover'}，{id:1，name:' my music '，link3360'/mymusic'}，{id:2，name:Link:' friend'}，{id:3，name:' mall '，link:' mall'}，{id:4，name: '音乐家'，link3360 '音乐家' }，{id:5，name3333。

ul class=' nav-pits main-nav ' Li v-for='(item，index)在指南中' :key='index '角色=' presentation ' : class=' item . id==guide current '？指南-活动的“:”路由器-链接：到='项目。链接“{item。name}}/router-link/Li/ulto:这是我们的导航路径，需要填写你在router/index.js文件中配置的路径值。

4.单页多路由区域操作

我们在App.vue中添加了路由器视图

模板div id=' app ' guide/guider outer-view//div/template router-view区域通过配置路线的js文件来操作这些区域的内容

设计完样式后，我们可以发现导航出现在我们的页面上

我们如何设置默认选项而不设置其样式？首先定义一个定义当前页面的变量：

Guidecurrent:0设置选定的样式：指南-活动{ background: black}.''之后的指南活动；font-size : 8px；绝对位置：color: rgb(182，15，15)；top : 87%；左侧：50%；transform: translate(-10px，-5px)；}通过v-bind属性将class属性分配给每个li元素

也就是说，只有当前页面的li元素会加载活动样式

请注意，如果vue中的属性被设置为变量，

它必须以v-bind:属性名称]='[属性值]的形式编写

li v-for='(item，index)在guides' :key='index '角色=' presentation ' : class=' item . id==guide current '？指南-活动的“:”路由器-链接：到='项目。链接“{item。name}}/router-link/liNext，我们设计二次导航

5.辅助导航页面样式

如上所述，我们创建了两个。vue页面

排名. vue和推荐. vue

6.配置路由

index.js

routes :[{ path : '/DisCover '，name: 'discover '，component: DisCover，children:[ {path:'rec '，component3360 rank '，component3360 rank}，}，{path:'/mymusic '，name:' mymusic '，component3360 mymusic}] 6。为辅助导航配置路由器链路

ul class=' nav-pits ' Li角色='presentation' v-for='(item，index)在指南中' : key=' index ' : class=' item . id=' discover current '？活动的“:”路由器-将：链接到='项目。id“{ item。name}}/router-link/Li/ul这时，我们发现我们的二次导航已经出现了

同样，设置当前页面的变量，使用类变量和三元表达式实现函数

至此，我们的vue路由器实现了二次导航

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。