1. activeIndex 爲默認高亮值,根據改變activeIndex的值來改變高亮的值
當頁面改變的時候獲取當前的路由地址,截取第一個 / 後面的值,就是當前的高亮值了
爲何要截取呢?
由於點到子集頁面的時候,刷新頁面找不到路由,因此在設置路由的時候就要注意了,是兩層了(例如:/list/details)javascript
<template> <el-menu :default-active="activeIndex" class="el-menu-demo headnav" mode="horizontal" router> <el-menu-item v-for="(item,index) in nav" :index="item.path">{{item.title}}</el-menu-item> </el-menu> </template> <script> export default{ name:'Head', data(){ return{ activeIndex:'', nav:[ {title:'進度管理',path:'/projectlist'}, {title:'採集監控',path:'/controlList'}, {title:'任務管理',path:'/tasklist'}, ] } }, mounted(){ this.activeIndex = "/"+this.$route.path.split("/")[1]; } } </script>