vue-router+elelment-ui，实现导航栏激活高亮

<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值变成自己的路由地址。

    <el-menu-item index="/main/task">
        <i class="el-icon-circle-check"></i>
         站点管理
    </el-menu-item>

这样导航栏就自动随路由地址高亮啦~~

但是如果你有子路由，那进入子路由旁边的导航栏是不会亮的，因为index值还是你父路由的地址，所以我们需要改变index值或者把$route.path匹配的路径变成父路由的地址，我选择第二种，这样我们就需要路由钩子了!

首先将:default-active="$route.path"变成:default-active="activeindex"绑定一个变量activeindex

<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♪(･ω･)ﾉ