vue-router+elelment-ui，實現導航欄激活高亮

時間 2020-09-20

標籤 vue router+elelment router elelment 實現導航激活简体版

原文原文鏈接


<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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。