vue 嵌套路由切换整个容器重新render

Question

我在项目中使用了嵌套路由，
路由配置页面代码如下：

const routes = [{
    path: '/',
    beforeEnter: getUserInfo,
    component: resolve => require(['../components/app-main.vue'], resolve),
    children: [
        {
            path: 'manage-menu',
            name: 'manage-menu',
            component: resolve => require(['../pages/manage/manage-menu.vue'], resolve)
        },
        {
            path: 'manage',
            name: 'manage',
            component: resolve => require(['../pages/manage/manage-container.vue'], resolve),
            children: [
                {
                    path: ':operation/:type/:id?',
                    name: 'content',
                    component: resolve => require(['../pages/manage/manage-container-content.vue'], resolve)
                }
            ]
        }
    ]
}];

容器页面

<template>
    <div class="container">
        <div class="sidebar">
            <el-menu @select="handleMenuSelected" :default-active="firstMenu">
                <el-menu-item-group v-for="(menu, key1) in menuConfig" :key="menu.id" :title="menu.title">
                    <el-menu-item v-for="(item, key2) in menu.menus" :key="item.id" :index="item.url">
                        {{item.title}}
                    </el-menu-item>
                </el-menu-item-group>
            </el-menu>
        </div>
        <div class="content">
            <router-view class="route" key="content"></router-view>
        </div>
    </div>
</template>

子集页面

<template>
    <div>
        {{$route.params}}
    </div>
</template>

当我点击侧边栏时候，路由匹配成功，子组件加载成功，但是 容器也重新render了一遍，但是正常是容器不应该重新render的，找不到原因，求解答

Answer 1

请问你后来找到原因了吗，我现在也遇到了这个问题

Answer 2

把router-view 中的key 删掉就好了，我今天也碰到了这个问题。

Answer 3

你点击的是 el-menu 组件
el-menu 组件的状态改变了 自然要 render 了
容器也重新render