Element的Nav导航高亮

这两天遇到一个问题：element的Nav菜单点击之后，跳转到相应页面，然后点击之后的菜单要高亮显示。菜单写成了组件。

研究了好长时间没解决，今天晚上找到一个解决方案，完美的解决了问题！记录一下。

链接🔗：vue 中使用element-ui的menu选中项高亮的问题

nav组件：

<template>
    <div style="padding-left: 15px">
        <el-menu :default-active='$route.name' class="el-menu-vertical-demo"
                active-text-color="#409EFF" router
                @open="handleOpen" @close="handleClose">
            <el-menu-item index="/">
                <span>Home</span>
            </el-menu-item>
            <el-menu-item index="allQuestions">
                <span>Questions</span>
            </el-menu-item>
            <el-menu-item index="tags">
                <span>Tags</span>
            </el-menu-item>
            <el-menu-item index="users">
                <span>Users</span>
            </el-menu-item>
        </el-menu>
    </div>
</template>

使用:route.name和router，在点击菜单后跳转到相应的页面，其中一个页面：

<template>
    <div class="pane">
        <router-view></router-view>
        <el-row>
            <header1></header1>
            <el-col :span="4">
                <side-bar style="margin-top: 15px"></side-bar>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import SideBar from '../components/SideBar.vue'
import Header from '../components/Header.vue'
    components: {
        'side-bar': SideBar,
        'header1': Header,
    }
</script>

路由的配置：

export default new Router({
    routes: [{
            path: '/users',
            name: 'users',
            component: User
        }
    ]
})

发现这样配置之后会将 index添加到path中，菜单也能高亮显示。