Vue3嵌套路由中使用keep-alive缓存多层的实现

#目录

• 前言
• Demo项目结构
• 路由层级扁平化
• 给所有的 router-view 都嵌套上 keep-alive

#前言

keep-alive是Vue中的缓存标签， 组件在标签中的内容会被缓存下来;但是在多层嵌套的router-view中， 只能缓存到该层下的router-view， 由于路由嵌套比较常见，所以这里提供两种我觉得OK的解决方案。

解决思路

• 路由层级扁平化，在路由守卫中执行一个拍平的函数，将需要缓存的路由提升到第一层，这样处理会影响到路由层级，最直白的影响如对 面包屑 等功能有直接影响
• 把所有的 router-view 都通过 keep-alive 包裹起来， 通过keep-alive的include, exclude 来判断是否需要缓存。

#Demo项目结构

router.ts

路由的结构大概是这样的 Layout > TableManage > (List, Detail, Add...)

#路由层级扁平化

在路由的 afterEach 执行一个扁平化方法， 举例：

复制

1.  import router from  '@/router/index'
2.  import  PageTitleUtils  from  '@/utils/PageTitleUtils'
3.  import  {  ElMessage  }  from  'element-plus'
4.  import useStore from  '@/store/index'
5.  import type {  RouteLocationNormalized,  NavigationGuardNext  }  from  'vue-router'
6.  import  NProgress  from  'nprogress'
7.  import  'nprogress/nprogress.css'

9.  NProgress.configure({ showSpinner:  false  })  // NProgress Configuration

11.  const  { user, routeStore }  = useStore()

13.  const whiteList =  \['/login'\]  // no redirect whitelist

15.  router.beforeEach(async (to:  RouteLocationNormalized,  from:  RouteLocationNormalized,  next:  NavigationGuardNext)  =>  {
16.    NProgress.start()
17.    if  (user.hasToken())  {
18.    if  (to.path ===  '/login')  {
19.    next({ path:  '/'  })
20.    NProgress.done()
21.    }  else  {
22.    if  (user.hasUserInfo())  {
23.    next()
24.    NProgress.done()
25.    }  else  {
26.    try  {
27.   await user.getUserInfo()
28.   await routeStore.setRoutes()
29.    next({  ...to, replace:  true  })
30.    NProgress.done()
31.    }  catch  (error: any)  {
32.   routeStore.resetRoutes()
33.   user.resetUserInfo()
34.    ElMessage.error(error ||  'Has Error')
35.    next(`/login?redirect=${to.fullPath}`)
36.    NProgress.done()
37.    }
38.    }
39.    }
40.    }  else  {
41.    /\* has no token */
42.    if  (whiteList.indexOf(to.path)  !==  -1)  {
43.    // in the free login whitelist, go directly
44.    next()
45.    NProgress.done()
46.    }  else  {
47.    // other pages that do not have permission to access are redirected to the login page.
48.    next(`/login?redirect=${to.fullPath}`)
49.    NProgress.done()
50.    }
51.    }
52.  })

54.  router.afterEach((to: any)  =>  {
55.    NProgress.done()
56.    // set page title
57.    const  { meta }: any = to
58.   document.title =  PageTitleUtils.getPageTitle(meta.title)
59.    // delayering router
60.   delayeringRoute(to)
61.  })

63.  /**
64.   \* 递归处理多余的 layout : <router-view>，
65.   \* 让需要访问的组件保持在第一层 index : <router-view> 之下
66.   */
67.  function delayeringRoute(to:  RouteLocationNormalized)  {
68.    if  (to.matched && to.matched.length >  2)  {
69.    for  (let i =  0; i < to.matched.length; i++)  {
70.    const element = to.matched\[i\]
71.    // 移除多余的 layout， 也许你项目中并不叫 layout ，自行修改此处
72.    if  (element.components?.default.name ===  'layout')  {
73.   to.matched.splice(i,  1)
74.   handleKeepAlive(to)
75.    }
76.    }
77.    }
78.  }

以上代码示例中， delayeringRoute 是移除多余 layout 的方法， 在路由的afterEach方法中去移除，弊端很明显， 路由的结构受到了影响

#给所有的 router-view 都嵌套上 keep-alive

这是我比较推荐的一种方法， 没什么副作用，也不麻烦， 毕竟所有的 router-view 都一样，如果你使用的IDE是vscode，可以直接把这段代码写进项目中的代码片段， 方便使用。

Layout的Main

复制

1.  <script  lang="ts"  setup  name="AppMain">
2.    import  { useRoute } from 'vue-router'
3.    import useStore from '@/store';
4.    import  { storeToRefs } from 'pinia';

6.    const route = useRoute()
7.    const  { tagview }  = useStore()
8.    const  { cacheList }  = storeToRefs(tagview)
9.  </script>

11.  <template>
12.    <div  class="app-main">
13.    <router-view  v-slot="{ Component }">
14.    <keep-alive :include="cacheList">
15.    <component :is="Component" :key="route.fullPath"  />
16.    </keep-alive>
17.    </router-view>
18.    </div>
19.  </template>

21.  <style  scoped  lang="scss">
22.  </style>

其他嵌套的路由， 不管几层，都可以这样处理

复制

1.  <script  lang="ts"  setup  name="TableManage">
2.    import  { useRoute } from 'vue-router'
3.    import useStore from '@/store';
4.    import  { storeToRefs } from 'pinia';
5.    import  { onMounted } from 'vue';

7.    const route = useRoute()
8.    const  { tagview }  = useStore()
9.    const  { cacheList }  = storeToRefs(tagview)

11.   onMounted(()  =>  {
12.   tagview.addCacheList('TableManage')
13.    })

15.  </script>

17.  <template>
18.    <router-view  v-slot="{ Component }">
19.    <keep-alive :include="cacheList">
20.    <component :is="Component" :key="route.fullPath"  />
21.    </keep-alive>
22.    </router-view>
23.  </template>

这样就可以实现嵌套路由的缓存了。 附上演示

到此这篇关于Vue3嵌套路由中使用keep-alive缓存多层的实现的文章就介绍到这了,更多相关Vue3 keep-alive缓存多层内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！