解决element-ui侧边导航在页面刷新后失去高亮的问题
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
element-ui + vue.js项目中,页面刷新后侧边导航失去高亮。在此,解决此问题
1. element-ui 提供一个属性
:default-active='activeNav'
来设置导航的默认高亮。可以利用这个属性来处理页面刷新后的高亮问题
2.在页面刷新的时候,获取地址栏中的地址,再写一个地址与做导航的配置文件,得出default-active 的值即可。
下面是我写的配置文件
// 路由地址对应左侧导航的index
let navConfig
= {
'index' :
'0',
'shell_manage' :
'1',
'job_execution' :
'2-0',
'periodic_task' :
'2-1',
'job_query' :
'2-2',
'approve_manage' :
'3',
'module_manage' :
'4',
'user_new' :
'5-0',
'page_new' :
'5-1',
'role_new' :
'5-2'
};
function
getActiveNav(
href) {
let key
= href.
split(
'/root/')[
1];
return navConfig[key];
};
export
default getActiveNav;
下面是在导航页面获取并设置 default-active 的方法
<
template>
<
div
id=
"left-nav">
<!-- 导航菜单 -->
<
el-menu
:default-active='activeNav'>
</
el-menu>
</
div>
</
template>
<
script>
import getActiveNav
from
'../../../assets/utils/leftNavConfig';
export
default {
name:
'navArea',
//导航区域
data(){
return {
activeNav:
'0'
/* 左侧菜单高亮项 */
}
},
mounted() {
this.activeNav
=
getActiveNav(window.location.href);
},
methods: {}
}
</
script>
GitHub 加速计划 / eleme / element
10
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45
8 个月前
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 8 个月前
更多推荐
已为社区贡献8条内容
所有评论(0)