若依框架vue三级及以上菜单keep-alive缓存失效问题

一、需求

        打开三级及以上菜单后再次点击时缓存，不请求接口增强用户体验

二、问题

        在若依框架中配置正确且页面写了name='Home'进行缓存，依然无法生效

三、解决方案

        在路由守卫beforeEach钩子中操作matched属性，代码如下

router.beforeEach((to, from, next) => {
  NProgress.start()
  if (getToken()) {
    // 三级菜单组件无法缓存问题
    if (to.matched && to.matched.length > 2) {
      to.matched.splice(1, to.matched.length - 2)
    }
    to.meta.title && useSettingsStore().setTitle(to.meta.title)
   
    } else {
      next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页
      NProgress.done()
    }
  }
})