由于项目需求,要求三级菜单实现缓存功能,然而vue三级路由不支持三级菜单缓存,jeecg-boot vue2版本未兼容此功能,特此记录解决办法
1.解决思路: 由于三级菜单无法缓存,则需要把三级页面铺开为二级页面,左侧菜单则继续用三级路由
permission.js页面
//router.beforeEach 内增加
to.meta['matched'] = to.matched.filter((e) => {
return e
})
if (!to.meta.isAlwaysShow && to.matched && to.matched.length > 3) {
to.matched.splice(2, to.matched.length - 3)
}
components/muen/index.js页面
const routes = this.$route.meta['matched'] // 新修改,展开菜单问题
const { hidden, selectedKeys } = this.$route.meta
if (routes.length >= 3 && hidden) {
routes.pop()
this.selectedKeys = selectedKeys
} else {
this.selectedKeys = [routes.pop().path]
}
let openKeys = []
if (this.mode === 'inline') {
routes.forEach(item => {
openKeys.push(item.path)
})
}