这两天遇到一个问题：element的Nav菜单点击之后，跳转到相应页面，然后点击之后的菜单要高亮显示。菜单写成了组件。
研究了好长时间没解决，今天晚上找到一个解决方案，完美的解决了问题！记录一下。
链接🔗：vue 中使用element-ui的menu选中项高亮的问题
nav组件：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <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，在点击菜单后跳转到相应的页面，其中一个页面：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <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>
|
路由的配置：
1
2
3
4
5
6
7
8
| export default new Router({
routes: [{
path: '/users',
name: 'users',
component: User
}
]
})
|
发现这样配置之后会将 index添加到path中，菜单也能高亮显示。