vue+element NavMenu 导航菜单 选中状态失效 解决方法
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
问题:左侧菜单,选中状态失效,1.路由跳转过来,选中失效;2.刷新页面失效
解决方法
1.路由跳转(NavMenu子菜单没有v-if)+刷新
app.vue
//html
<el-menu
router
ref='menu'
:default-active='$route.path' //刷新
class="el-menu-vertical-demo"
background-color="#002140"
text-color="#fff"
active-text-color="#ffd04b">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-cold-drink"></i>
<span>米粒姐</span>
</template>
<el-menu-item index="/CallList">通话回推记录</el-menu-item>
<el-menu-item index="/CallRecordList">通话记录</el-menu-item>
</el-submenu>
</el-menu>
//js
watch: {
$route() {
let i = this.$route.path;
setTimeout(() => { //路由跳转
this.$refs.menu.activeIndex = i
}, 100)
}
}
2.路由跳转(因为NavMenu有些子菜单会加上v-if,权限控制时候经常发生)+刷新
//html
<el-menu
router
ref='menu'
:default-active='$route.path' //也可以注销 刷新
class="el-menu-vertical-demo"
background-color="#002140"
text-color="#fff"
active-text-color="#ffd04b">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-cold-drink"></i>
<span>米粒姐</span>
</template>
<el-menu-item index="/CallList">通话回推记录</el-menu-item>
<el-menu-item index="/CallRecordList">通话记录</el-menu-item>
</el-submenu>
</el-menu>
//js
mounted () {
setTimeout(() => { //刷新
this.$refs.menu.defaultActive = localStorage.getItem('index')
}, 100)
},
watch: {
$route() {
let i = this.$route.path;
localStorage.setItem('index',i) //刷新
setTimeout(() => { //路由跳转
this.$refs.menu.activeIndex = i
}, 100)
}
}
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献6条内容
所有评论(0)