【vue】聊一聊嵌套路由使用keep-alive缓存的实现

背景

大家应该都写过类似下图布局的页面,一个顶部导航、一个侧边菜单和一个主要内容区域。其中只有主要内容区域是变化。在这个基础上实现缓存大家应该都有经历过。只要在router-view上使用keep-alive标签就可以轻松实现缓存。但是在多层嵌套的router-view中,只能缓存到该层下的router-view。针对上面的情况下面聊聊我的实现。(以下内容都是基于Vue3 + pinia 实现)

路由层级扁平化

搜索网上的方案大部分都是说将路由层级扁平化,直白点就是在路由守卫中将route对象的matched属性将使用到router-view的组件进行删除,将路由层级提升,从而实现缓存的目的。这种方案可行,但是不能适用于所有情况。如果路由组件中存在布局(如下图),那该方案会将会丢失这部分(红色框内)内容。

所有router-view都使用keep-alive(推荐)

既然keep-alive无法多层嵌套缓存,那我们可以换个思路,将每个router-view都使用keep-alive,通过include属性来判断组件是否需要进行缓存。

重新封装router-view组件

我们必然不会只在一处使用router-view,那我们就需要对router-view组件进行二次封装。举例代码如下

vue 复制代码
<script setup>
import { computed } from 'vue'
import { useRouteCacheStore } from '@/stores/modules/route-cache'

defineProps({
  keepalive: {
    type: Boolean,
    default: () => false
  }
})

const routeCacheStore = useRouteCacheStore()

const keepalives = computed(() => routeCacheStore.keepalives)

</script>

<template>
  <router-view v-slot="{ Component }">
    <keep-alive :include="keepalives" v-if="keepalive">
      <component :is="Component" />
    </keep-alive>
    <component :is="Component" v-else />
  </router-view>
</template>

代码中的keepalives就是需要缓存组件名称的数组,一般情况下我们都是放在pinia或者vuex中。

js 复制代码
import { defineStore } from 'pinia'

export const useRouteCacheStore = defineStore('routeCache', {
  state: () => ({
    keepalives: ['One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight'],
  })
})

路由层级

如上图:路由一、二、三为同级路由,其中路由三为使用router-view的组件。路由三下的路由四、五、六也为同级路由,其中路由六为使用router-view的组件。路由六下的路由七、八也为同级路由。 嵌套路由层级代码如下

js 复制代码
{
  path: '/route-cache',
  name: 'routeCache',
  redirect: { name: 'routeCacheOne' },
  component: () => import('../views/route-cache/index.vue'),
  children: [
    {
      path: '/one',
      name: 'routeCacheOne',
      component: () => import('../views/route-cache/views/one/index.vue')
    },
    {
      path: '/two',
      name: 'routeCacheTwo',
      component: () => import('../views/route-cache/views/two/index.vue')
    },
    {
      path: '/three',
      name: 'routeCacheThree',
      redirect: { name: 'routeCacheFour' },
      component: () => import('../views/route-cache/views/three/index.vue'),
      children: [
        {
          path: '/four',
          name: 'routeCacheFour',
          component: () => import('../views/route-cache/views/four/index.vue')
        },
        {
          path: '/five',
          name: 'routeCacheFive',
          component: () => import('../views/route-cache/views/five/index.vue')
        },
        {
          path: '/six',
          name: 'routeCacheSix',
          redirect: { name: 'routeCacheSeven' },
          component: () => import('../views/route-cache/views/six/index.vue'),
          children: [
            {
              path: '/seven',
              name: 'routeCacheSeven',
              component: () => import('../views/route-cache/views/Seven/index.vue')
            },
            {
              path: '/eight',
              name: 'routeCacheEight',
              component: () => import('../views/route-cache/views/eight/index.vue')
            },
          ]
        },
      ]
    },
  ]
}

注意

如上图的结构,如果所有组件都需要缓存那keepalives数组应该等于['One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight'], 而不是['One', 'Two', 'Four', 'Five', 'Seven', 'Eight']。简单的说就是使用router-view的组件(即路由三、路由六)也需要给组件命名并记录到keepalives数组中。如果不这么做的话会导致出现部分情况不缓存:

完整演示

以上就是本次分享的内容,附上源码

感谢看官看到这里,如果觉得文章不错的话,可以给小生的几个开源项目点个Star⭐!

相关推荐
星语卿3 分钟前
Vuetify:构建优雅Vue应用的Material Design组件库
前端·javascript·vue.js
wangbing112514 分钟前
界面规范11-对话框
javascript·vue.js·elementui
roman_日积跬步-终至千里35 分钟前
【系统架构设计(25)】Web应用服务器与现代架构
前端·架构·系统架构
yshhuang38 分钟前
在Windows上搭建开发环境
前端·后端
littleplayer39 分钟前
Redux在iOS中的使用
前端
跟橙姐学代码41 分钟前
Python里的“管家婆”:带你玩转os库的所有神操作
前端·python·ipython
jingling55541 分钟前
uniapp | 快速上手ThorUI组件
前端·笔记·前端框架·uni-app
UrbanJazzerati41 分钟前
可拖拽的进度条组件实战:实现思路与Demo
前端·面试
Cache技术分享44 分钟前
188. Java 异常 - Java 异常处理规范
前端·后端