傳統方式

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 }