vuejs導航條動態切換active狀態

1. 用一個數組存導航條，用v-for循環它，這樣可以減少代碼，二可以使用它的下標來判斷高亮，三還可以獲取后端的導航信息來遍歷
2. 重點是在：routerLink(index, path)函數，傳入當前點擊的下標，自定義一個下標，判斷是否相等就用三元符號判斷多給一個高亮樣式
3. 如何解決刷新就不高亮或第一個高亮了，很簡單，監聽一下當前路由在判斷就好了

具體代碼都在下面了

效果圖：

html代碼：

     <ul>
         <!-- 導航列表 -->
        <li class="nav-item"
                  v-for="(item, index) in nav"
                    @click="routerLink(index, item.path)"
                    :key="index">
                    <!-- 判斷高亮表 -->
                    <p :class=" navIndex === index ? 'active' : ''">
                    {{ item.title }}
                    </p>
         </li>                                         
     </ul>                

 data數據：

data(){
        return{
            nav:[
                {title:'首頁',path:'/'},
                {title:'產品服務',path:'/Product'},
                {title:'關於我們',path:'/About_us'}
            ],
            navIndex:0
        }
    },

methods方法：

 

/**
 * 路由跳轉
 * @param index
 * @param link
*/
routerLink(index, path) {
 // 點擊哪個路由就賦值給自定義的下下標
 this.navIndex = index;
 // 路由跳轉
 this.$router.push(path)
},
 
/**
 * 檢索當前路徑
 * @param path
*/
checkRouterLocal(path) {
 // 查找當前路由下標高亮
 this.navIndex = this.nav.findIndex(item => item.path === path);
}

監聽路由變化獲取當前路由

watch: {
 "$route"() {
 // 獲取當前路徑
 let path = this.$route.path;
 // 檢索當前路徑
 this.checkRouterLocal(path);
 }
},

active樣式

    .active{color:#345AFA;}