<el-menu :default-active="$route.path" class="el-menu-vertical-demo" background-color="#31506F" text-color="#fff" active-text-color="#FFA800" router :unique-opened="uniqueopened">
重要的是绑定:default-active="$route.path",而后再将index值变成本身的路由地址。vue
<el-menu-item index="/main/task"> <i class="el-icon-circle-check"></i> 站点管理 </el-menu-item>
这样导航栏就自动随路由地址高亮啦~~this
可是若是你有子路由,那进入子路由旁边的导航栏是不会亮的,由于index值仍是你父路由的地址,因此咱们须要改变index值或者把$route.path匹配的路径变成父路由的地址,我选择第二种,这样咱们就须要路由钩子了!spa
首先将:default-active="$route.path"变成:default-active="activeindex"绑定一个变量activeindexcode
<script> export default{ data(){ return{ uniqueopened:true, activeIndex:'/main/system' //默认激活路由地址 } }, methods:{ defaultIdex(){ this.activeIndex = this.$route.path; } }, created(){ //vue生命周期建立时 this.defaultIdex() }, beforeUpdate(){ this.activeIndex = this.$route.matched[2].path //重要的点,this.$route.matched[2].path 就是父路由的地址,使用的是路由钩子。 }, update(){ //vue生命周期改变时 this.defaultIdex() }, } </script>
个人理解也是很浅薄,愿有好办法的博友能够告知。三扣~Thanks♪(・ω・)ノrouter