鍍金池/ 問答/HTML5  HTML/ elementUI 動(dòng)態(tài)設(shè)置激活的導(dǎo)航

elementUI 動(dòng)態(tài)設(shè)置激活的導(dǎo)航

瀏覽器刷新后希望能選中與當(dāng)前路由對應(yīng)的導(dǎo)航, 我現(xiàn)在的做法是將地址欄截取下來,然后設(shè)置,defaultActive,但是這樣感覺不太好, 還有沒有別的方法可以向router-link那樣可以刷新仍然選中, ele的文檔中沒有看到有響應(yīng)的用法

回答
編輯回答
離人歸

1樓回答正確

2017年10月10日 01:10
編輯回答
抱緊我

確實(shí)需要設(shè)置 defaultActive,不過你可以借助 this.$route.path 這個(gè)屬性來計(jì)算 defaultActive,會(huì)比攔截地址欄,然后處理 url 匹配方便不少。

假設(shè)我們的路由長下面這樣:

const routes = [
  { path: '/a', name: '組件 A', component: ComponentA },
  { path: '/b', name: '組件 B', component: ComponentB }
]

然后路由可以根據(jù)上面的數(shù)組 v-for 出來:

<template>
    <el-menu :default-active="activeMenuIndex" router>
        <el-menu-item 
            v-for="route in routes"
            :key="route.path"
            :index="route.path"
            :route="route">
            {{ route.name }}
        </el-menu-item>
    </el-menu>
</template>

<script>
export default {
    computed: {
        activeMenuIndex () {
            return this.$route.path
        }
    }
}
</script>
2018年9月17日 06:16