element-ui el-menu 匹配不到路由时会选中in

前言

项目中首页和具体的菜单页分开展示，头部和尾部共用一个。首页展示如下：

index

代码：

const menus = [... {
        name: '2',
        url: '/info',
        children: [{
                name: '系统'，
                url: '/system'
            },
            {
                name: '厂商'，
                url: '/firm'
            }
        ]
    }...]

 <el-menu
            class="header-menu"
            mode="horizontal"
            active-text-color="#419eff"
            :default-active="$route.path"
            @select="handleSelect"
        >
            <template v-for="(item, index) in menus">
                <el-submenu
                    v-if="item.children"
                    popper-class="header-submenu"
                    :key="item.name"
                    :index="item.url"
                >
                    <template slot="title">{{ item.name }}</template>
                    <el-menu-item
                        v-for="childMenu in item.children"
                        :key="childMenu.name"
                        :index="childMenu.url "
                    >
                        {{ childMenu.name }}
                    </el-menu-item>
                </el-submenu>
                <el-menu-item v-else :key="item.name" :index="item.url">
                    {{ item.name }}
                </el-menu-item>
            </template>
        </el-menu>

需求

菜单2下面的系统和厂商要求点击不跳转

实现

把对应的url注释掉

结果

点击的时候不会选中菜单，页面不跳转。但是访问其他子页面后，通过浏览器回退按钮退回到index页面时，莫名就选中了2菜单栏，包括下面2个子菜单。如下图：

error
想了下应该是子菜单没有设置唯一标志index。而且/index这个路由在menus中也找不到，所以就默认匹配index===null的路由了?于是给el-menu-item加上index,果然好了。

总结

el-menu el-menu-item 一定要设置唯一index。