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

2019-11-19 11:12:15

字体：大中小

来源：转载

供稿：网友

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

我们先一层一层写导航

先设计第一层

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>

这时我们发现我们的二级导航已经出现了