vue-router二级导航切换路由及高亮显示的实现方法 - 行业资讯

这里以网易云音乐作为示例,效果图:

我们先一层一层写导航
　　

先设计第一层
　　

<强> 1。设计导航页面样式
　　

第一个导航页面为发现

Discover.vue:

　　　　　　& lt; !- - - - -在　　& lt; template> 　　& lt; div> 　　发现　　& lt;/div> 　　& lt;/template> 　　　　　　& lt; script> 　　出口默认{ 　　名称:“发现”, 　　数据(){ 　　返回{ 　　}; 　　} 　　}; 　　& lt;/script> 　　& lt; scoped>风格; 　　& lt;/style> 　　　　

第二个导航页面为而myspace
　　

其余代码一样,注意要把名字改为相应路由

　　　　　　名称:“而myspace” 　　　　

<强> 2。配置路由

index.js:

　　　　　　从“@/组件/导入发现发现的　　从“@/组件/导入而myspace而myspace的　　...... 　　　　路线:[ 　　{ 　　路径:/发现, 　　名称:“发现”, 　　组件:发现　　}, 　　{ 　　路径:/而myspace, 　　名称:“而myspace”, 　　组件:而myspace 　　} 　　) 　　　　

<强> 3。使用router-link制作导航
　　

我们创建一个新组件Guide.vue,把他插入到应用程序。vue中
　　

设计好路由的数据源:

　　　　　　导游:( 　　{ 　　id: 0, 　　名称:“发现音乐”, 　　链接:“/发现” 　　}, { 　　id: 1、　　名称:“我的音乐”, 　　链接:'/而myspace ' 　　}, 　　{ 　　id: 2 　　名称:“朋友”, 　　链接:‘朋友’ 　　}, 　　{ 　　id: 3, 　　名称:“商城”, 　　链接:“购物中心” 　　}, 　　{ 　　id: 4 　　名称:“音乐人”, 　　链接:“音乐家” 　　}, 　　{ 　　id: 5 　　名称:“下载客户端”, 　　链接:“下载” 　　} 　　) 　　　　

Guide.vue:

　　　　　　& lt; ul类=" nav nav-pills主导航”比; 　　& lt;李v=?项目、索引)指南”:关键=爸甘钡慕巧?把菔尽? 　　:类=" item.id==guidecurrent& # 63;“guide-active”:“” 　　比; 　　& lt; router-link:=" item.link "在{{item.name}} & lt;/router-link> 　　& lt;/li> 　　　　& lt;/ul> 　　　　

:是我们的导航路径,要填写的是你在路由器/index.js文件里配置的路径值

<强> 4。单页面多路由区域操作
　　

我们在App.vue中加入& lt; router-view>

　　　　　　& lt; template> 　　& lt; div id=坝τ谩北? 　　& lt; Guide> & lt;/Guide> 　　& lt; router-view/比; 　　& lt;/div> 　　& lt;/template> 　　　　

& lt; router-view>区域通过配置路由的js文件,来操作这些区域的内容

设计好样式后,我们可以发现我们的页面上出现了导航

vue-router二级导航切换路由及高亮显示的实现方法

那我们如何设置默认选项并未其设置样式呢?
　　先定义一个定义当前页面的变量:

　　　　　　guidecurrent: 0 　　　　

设置选中样式:

　　　　　　.guide-active { 　　背景:黑色; 　　} 　　　　{后.guide-active:: 　　内容:“◢◣”; 　　字体大小:8 px; 　　位置:绝对的; 　　颜色:rgb(15) 182年,15日; 　　上图:87%; 　　左:50%; 　　变换:翻译(-10 px, 5 px); 　　} 　　　　

通过v-bind属性将类属性赋给每一个& lt; li>元素
　　

也就是说只有当前页面的& lt; li>元素才会被加载活跃样式
　　

这里注意vue中的属性如果要以变量设置
　　

必须要写成v-bind:属性名]="[属性值)”的形式

　　　　　　& lt;李v=?项目、索引)指南”:关键=爸甘钡慕巧?把菔尽? 　　:类=" item.id==guidecurrent& # 63;“guide-active”:“” 　　比; 　　& lt; router-link:=" item.link "在{{item.name}} & lt;/router-link> 　　& lt;/li> 　　　　

下面我们设计二级导航

<强> 5。二级导航页面样式
　　

与上面相同,我们创建两个。vue页面