albercy
  • 0
  • 新人请关照

el-menu 在更新 router 的 params 后丢失高亮的问题

`

<template>
    <div>
        <el-button v-for="item in menus" :key="item.path" @click="change(item)">{{item.name}}</el-button>
        <el-menu :default-active="$route.path" router>
            <el-menu-item v-for="item in menus" :key="item.path" :index="item.path + '/' + id">{{item.name}}</el-menu-item>
        </el-menu>
        <router-view></router-view>
    </div>
</template>
<script>
export default {
    data () {
        return {
            menus: [
                { name: 'page A', path: 'a' },
                { name: 'page B', path: 'b' },
                { name: 'page C', path: 'c' }
            ],
            id: 0
        }
    },
    methods: {
        change (item) {
            this.$router.push({ params: { id: item.id } })
            this.id = item.id
        }
    }
}
</script>

`
其中 a,b,c 是三个需要用 id 访问的页面(/a/:id,/b/:id,/c/:id),如果一开始只操作 el-menu,菜单的高亮是正常的,但是更改 route 的 id 后,高亮就会丢失了,此时点击菜单也没有用了,但是用 vue 调试工具可以看到 default-active 是正常的,查看源码后发现是 el-menu 的 activeIndex 丢失了,请问各位大佬,这种情况要怎么解决

阅读 182
评论 3月25日提问
    1 个回答

    请提供 codepen 之类的在线 demo 来复现

    评论 赞赏 3月26日
      撰写回答

      登录后参与交流、获取后续更新提醒