传统方式

a标签实现跳转，为默认高亮节点增加自定义属性，并使用css定义高亮颜色，每次点击获取节点的索引，清空节点自定义属性，并为被点击的节点增加自定义的高亮属性

---

vue-router的实现方式

1         <router-link to='/films' tag='li'>电影</router-link>
2         <router-link to='/center' tag='li'>中心</router-link>
3         <router-link to='/cinemas' tag='li'>影院</router-link>

注意：

• to='#/films'的写法是错误的，规定省略#
• 每次点击节点，相应的节点自动增加router-link-active和router-link-exact-active属性，通过设置router-link-active属性的css样式就可以实现高亮显示
• 可以通过active-class='xxxx'修改router-link-active属性
• vue-router4以后tag写法被废弃，这样写会报错

---

 

vue-router4的实现方式

 

1         <router-link to='/center' custom v-slot="{navigate, isActive}">
2           <li @click="navigate" :class="isActive?'myactive':'' ">中心</li>
3         </router-link>
4         <router-link to='/cinemas' custom v-slot="{navigate, isActive}">
5           <li @click="navigate" :class="isActive?'myactive':'' ">影院</li>
6         </router-link> -->

 

• 使用v-slot写法，v-slot={navigate,isActive}中的变量不可替换成其它变量名
• to属性可以动态绑定，使用v-for指令写成如下形式：

1  <router-link v-for='data in datalist' :to='data.path' custom v-slot="{navigate, isActive}" :key='data.filmId'>
2    <li @click="navigate" :class="isActive?'myactive':'' ">{{data.name}}</li>
3  </router-link>

1 export default {
2   data(){
3     return {
4       datalist:[{path:'/films',name:'电影',filmId:1},{path:'/center',name:'中心',filmId:2},{path:'/cinemas',name:'影院',filmId:3}]
5     }
6   }
7 }