Vue3嵌套路由中怎么使用keep-alive缓存多层

发布时间:2023-04-18 09:49:08 作者:iii
来源:亿速云 阅读:259

本篇内容主要讲解“Vue3嵌套路由中怎么使用keep-alive缓存多层”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue3嵌套路由中怎么使用keep-alive缓存多层”吧!

前言

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

解决思路

Demo项目结构

router.ts

Vue3嵌套路由中怎么使用keep-alive缓存多层

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

路由层级扁平化

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

import router from '@/router/index'
import PageTitleUtils from '@/utils/PageTitleUtils'
import { ElMessage } from 'element-plus'
import useStore from '@/store/index'
import type { RouteLocationNormalized, NavigationGuardNext } from 'vue-router'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

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

const { user, routeStore } = useStore()

const whiteList = ['/login'] // no redirect whitelist

router.beforeEach(async (to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) => {
  NProgress.start()
  if (user.hasToken()) {
    if (to.path === '/login') {
      next({ path: '/' })
      NProgress.done()
    } else {
      if (user.hasUserInfo()) {
        next()
        NProgress.done()
      } else {
        try {
          await user.getUserInfo()
          await routeStore.setRoutes()
          next({ ...to, replace: true })
          NProgress.done()
        } catch (error: any) {
          routeStore.resetRoutes()
          user.resetUserInfo()
          ElMessage.error(error || 'Has Error')
          next(`/login?redirect=${to.fullPath}`)
          NProgress.done()
        }
      }
    }
  } else {
    /* has no token */
    if (whiteList.indexOf(to.path) !== -1) {
      // in the free login whitelist, go directly
      next()
      NProgress.done()
    } else {
      // other pages that do not have permission to access are redirected to the login page.
      next(`/login?redirect=${to.fullPath}`)
      NProgress.done()
    }
  }
})

router.afterEach((to: any) => {
  NProgress.done()
  // set page title
  const { meta }: any = to
  document.title = PageTitleUtils.getPageTitle(meta.title)
  // delayering router
  delayeringRoute(to)
})


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

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

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

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

Layout的Main

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

  const route = useRoute()
  const { tagview } = useStore()
  const { cacheList } = storeToRefs(tagview)
</script>

<template>
  <div class="app-main">
    <router-view v-slot="{ Component }">
      <keep-alive :include="cacheList">
        <component :is="Component" :key="route.fullPath" />
      </keep-alive>
    </router-view>
  </div>
</template>

<style scoped lang="scss">
</style>

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

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

  const route = useRoute()
  const { tagview } = useStore()
  const { cacheList } = storeToRefs(tagview)

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

</script>

<template>
  <router-view v-slot="{ Component }">
    <keep-alive :include="cacheList">
      <component :is="Component" :key="route.fullPath" />
    </keep-alive>
  </router-view>
</template>

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

到此,相信大家对“Vue3嵌套路由中怎么使用keep-alive缓存多层”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

推荐阅读:
  1. 怎么用Vue3和Element Plus实现自动导入
  2. Vue3如何实现无限滚动组件

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue3 keep-alive

上一篇:Vue自定义指令如何使用

下一篇:Android自定义控件之小说书架怎么实现

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》