elementUI 动态设置激活的导航

Question

浏览器刷新后希望能选中与当前路由对应的导航, 我现在的做法是将地址栏截取下来,然后设置,defaultActive,但是这样感觉不太好, 还有没有别的方法可以向router-link那样可以刷新仍然选中, ele的文档中没有看到有响应的用法

Answer 1

确实需要设置 defaultActive，不过你可以借助 this.$route.path 这个属性来计算 defaultActive，会比拦截地址栏，然后处理 url 匹配方便不少。

假设我们的路由长下面这样：

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

然后路由可以根据上面的数组 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>

Answer 2

1楼回答正确