解决jeecg-boot vue2 三级菜单无法缓存问题

404 阅读1分钟

由于项目需求,要求三级菜单实现缓存功能,然而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)
    })
}