解决Vue三级及以上路由无法缓存的问题_vue3 setcache失效-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40247817/article/details/122371554

本文探讨了在Vue项目中遇到的三级及以上路由无法缓存的问题，指出问题根源在于name属性只匹配到了第三级路由，导致缓存失效。解决方法是将三级路由转化为二级路由，确保组件名被正确缓存，从而提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

解决Vue三级及以上路由无法缓存的问题

前言
一、代码参考

前言

在平时开发时，面对那种表单比较多的页面，我们来回切换时页面老是刷新，会导致没有保存的数据丢失，会很大影响用户体验感，这时候我们就需要对页面进行缓存，而当我们<keep-alive :include="cachedViews"> 中已经缓存来了这个路由组件，路由的名称和组件名称也一样，也设置了cache，但是我们发现页面就是不缓存，非常奇怪。
其实，当路由变更时就会调用addViewTags,addViewTag会根据匹配的路由name属性进行缓存。而用到三级路由的时候，拿到name只能时第三级路由的name，二级路由组件的名字会丢失，keep-alive就不会进行缓存。
所以我们把三级，及一下的路由转换为二级路由即可解决这个问题

一、代码参考

const permission = {
   
  state: {
   
    routes: [],
    addRoutes: []
  },
  mutations: {
   
    SET_ROUTES: (state, routes) => {
   
      state.addRoutes = routes
      state.routes = constantRoutes.concat(routes)
    }
  },
  actions: {
   
    // 生成路由
    GenerateRoutes({
     commit }) {
   
      return new Promise(resolve => {
   
        // 向后端请求路由数据
        getRoute