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

Question

`

<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 丢失了，请问各位大佬，这种情况要怎么解决

Answer 1

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