默认动态路由配置了多个页面就会展示多个页面,但实际需要限制只展示前面几个页面所以需要限制
在router.js中找到
// 方法一、获取菜单列表, 添加并全局变量保存,只针对某些权限生效,因此还需要优化
http
.get('/sys/menu/nav')
.then(({ data: res }) => {
if (res.code !== 0) {
Vue.prototype.$message.error(res.msg)
return next({ name: 'login' })
}
window.SITE_CONFIG['menuList'] = res.data
fnAddDynamicMenuRoutes(window.SITE_CONFIG['menuList'])
next({ ...to, replace: true })
//此处添加一行代码,代表将默认长度8改成了4,所以就会只展示前面4个页面
window.SITE_CONFIG['menuList'][1].children.length = 4
console.log(window.SITE_CONFIG['menuList'][1])
})
.catch(() => {
next({ name: 'login' })
})
})
方法二(推荐)
//遍历数组,根据数组里面的name来定位,列举有8个页面只展示4个页面的长度,再赋值展示
//代码需要写在main-sidebar.vue中的created()方法里
//不同权限都生效
created() {
//限制展示
for (var i = 0; i < window.SITE_CONFIG['menuList'].length; i++) {
if (window.SITE_CONFIG['menuList'][i].name == '门店管理') {
window.SITE_CONFIG['menuList'][i].children.length = 4
}
}
this.$store.state.sidebarMenuList = window.SITE_CONFIG['menuList']
},
vue限制菜单列表展示
于 2023-01-29 10:24:09 首次发布