vue element NavMenu :default-active根据路由进行自动配置(包括点击页面中的链接,即将前往的页面不在导航中,想要保持最外层级别的导航保持高亮)
导航当中设置:default-active值之后点击页面中的跳转链接(即将前往的页面不在导航中),此时的导航高亮就会消失,目标:点击父页面中的查看按钮,进入到详情页面,父页面导航仍然保持高亮。刷新浏览器导航,当前页面对应的导航仍然保持高亮。未退出系统,直接关闭浏览器的情况下,浏览器直接输入地址进入系统的,打开什么页面相对应导航高亮呈上代码:在index.js中添加下面代码:(路由权...
·
导航当中设置:default-active值之后点击页面中的跳转链接(即将前往的页面不在导航中),此时的导航高亮就会消失,
目标:
- 点击父页面中的查看按钮,进入到详情页面,父页面导航仍然保持高亮。
- 刷新浏览器导航,当前页面对应的导航仍然保持高亮。
- 未退出系统,直接关闭浏览器的情况下,浏览器直接输入地址进入系统的,打开什么页面相对应导航高亮
呈上代码:
在index.js中添加下面代码:(路由权限中获取to.path 截取掉path中的/,存储到session中为了解决刷新浏览器和直接关闭浏览器的情况)
// 配置路由权限
router.beforeEach((to, from, next) => {
let token=localStorage.getItem('token')
localStorage.setItem('backRouter', from.name);//上个页面的url
//处理导航选中开始
let currPath=to.path
currPath=currPath.substring(1,currPath.length)
if (currPath === 'guideIndex' | 'EvaluationInformation' | 'ChooseCompany' | 'SelectTemplate' | 'MaterialReview' | 'implementation' | 'evaluationConfig' | 'CheckList' | 'ExecutionEvaluation') sessionStorage.setItem('menuDefaultActive','guide')
else if (currPath === 'statusMonitoring') sessionStorage.setItem('menuDefaultActive','serviceStatus')
else sessionStorage.setItem('menuDefaultActive',currPath)
//处理导航选中结束
if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
if (token) { // 判断本地是否存在access_token
NProgress.start()//页面加载进度条开始
next()
} else {
// 未登录,跳转到登陆页面,并且带上 将要去的地址,方便登陆后跳转。
next('/login')
}
} else {
next()
}
})
在导航文件中(我是抽离出来的aside.vue)
data () {
return {
menuDefaultActive:sessionStorage.getItem('menuDefaultActive')
}
}
在template中绑定:default-active=“menuDefaultActive”,
<el-menu
:default-active="menuDefaultActive"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
text-color="" active-text-color="#409eff"
router
unique-opened
>
<template v-for="(item,index) in menuData">
<el-submenu v-if="item.children" :index="item.pathName" :key="index">
<template slot="title">
<i :class="item.iconName"></i>
<span style="">{{item.menuItem}}</span>
</template>
<template v-for="(result,i) in item.children">
<el-menu-item :route="{name:result.pathName}" :index="result.pathName" :key="i">{{result.menuItem}}</el-menu-item>
</template>
</el-submenu>
<el-menu-item v-else :route="{name:item.pathName}" :index="item.pathName" :key='index' class="first">
<i :class="item.iconName"></i>
<span slot="title">{{item.menuItem}}</span>
</el-menu-item>
</template>
</el-menu>
菜单有一级二级菜单,我自行抽了个模板出来需要的可以直接用 ,直接遍历数据即可,如果要是接口的可以直接提换数据
数据格式我采取和路由配置的方式相同
menuData:[
{
pathName:'index',
menuItem:'首页',
iconName:'el-icon-menu'
},{
pathName:'menu_node_1',
menuItem:'信息安全测评',
iconName:'el-icon-s-custom',
children:[{
pathName:'guide',
menuItem:'测评向导'
},{
pathName:'trace',
menuItem:'测评跟踪'
},{
pathName:'result',
menuItem:'测评结果'
}]
},{
pathName:'menu_node_2',
menuItem:'参评企业管理',
iconName:'el-icon-office-building',
children:[{
pathName:'company',
menuItem:'企业列表'
}]
},{
pathName:'menu_node_3',
menuItem:'评测模板管理',
iconName:'el-icon-document-copy',
children:[{
pathName:'templatePage',
menuItem:'模板列表'
}]
},{
pathName:'menu_node_4',
menuItem:'评测用例管理',
iconName:'el-icon-folder-opened',
children:[{
pathName:'check',
menuItem:'材料审查用例'
},{
pathName:'tests',
menuItem:'技术测试用例'
}]
},{
pathName:'menu_node_5',
menuItem:'系统权限管理',
iconName:'el-icon-lock',
children:[{
pathName:'administrator',
menuItem:'评测管理员'
},{
pathName:'record',
menuItem:'系统操作记录'
}]
},{
pathName:'menu_node_6',
menuItem:'系统配置管理',
iconName:'el-icon-setting',
children:[{
pathName:'config',
menuItem:'系统配置参数'
}]
},{
pathName:'menu_node_8',
menuItem:'服务状态监控',
iconName:'el-icon-view',
children:[{
pathName:'serviceStatus',
menuItem:'信息服务状态'
}]
},{
pathName:'indicatorSystem',
menuItem:'安全指标体系',
iconName:'el-icon-menu'
}
]
更多推荐
已为社区贡献18条内容
所有评论(0)