vue如何实现路由缓存

(以下示例皆是以vue3+vite+ts项目为例)

场景一:所有路由都可以进行缓存

在渲染路由视图对应的页面进行缓存设置,代码如下:

html 复制代码
<template>
  <router-view v-slot="{ Component, route }">
    <transition name="router-fade" mode="out-in">
      <keep-alive>
        <component :is="Component" :key="route.fullPath" />
      </keep-alive>
    </transition>
  </router-view>
</template>

<router-view>:用来渲染当前路由对应的视图。

  • v-slot :解构 router-view 的插槽属性来访问当前路由的组件(Component)和路由对象(route)。

<transition>:用于实现页面路由切换时的过渡动画效果,可省略。

  • name="router-fade":定义过渡动画类名为router-fade,如router-fade-enter-active
  • mode="out-in":设置过渡模式为先出后进,即新组件先渲染,旧组件再离开

切记:虽然vue3支持一个组件中有多个根节点,但是<transition>不支持多个根节点,否者页面无法正确显示,例如:打开缓存过的页面会出现白屏现象。

<keep-alive>:用来缓存路由组件。

<component>:用来动态渲染组件。

  • :is="Component":表示要渲染的组件由 Component 变量决定。
  • :key="route.fullPath":为组件添加唯一的键值,确保路由发生变化时触发组件的重新渲染。

场景二:动态设置可以缓存的路由

  1. 在router中配置keepAlive,设置支持缓存的页面,例如
javascript 复制代码
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import Layout from '../views/layout/index.vue';
const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Layout',
    component: Layout,
    meta:{
      keepAlive:true //支持缓存
    }
  },
  {
    path: '/about',
    name: 'About',
    component: () => import("../views/about/index.vue"),
    meta:{
      keepAlive:false //不支持缓存
    }
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;
  1. 在支持缓存的对应页面中设置name ,此name必须于路由中设置的name一致。
javascript 复制代码
<script setup lang="ts">
// 使用 defineOptions 设置组件的 name 属性
defineOptions({
  name: 'Layout'
});
</script>

3.在渲染路由视图对应的页面进行缓存设置,代码如下:

(相比场景一,多了:include="cachedViews"的设置)

javascript 复制代码
<template>
  <router-view v-slot="{ Component, route }">
    <transition name="router-fade" mode="out-in">
      <keep-alive :include="cachedViews">
        <component :is="Component" :key="route.fullPath" />
      </keep-alive>
    </transition>
  </router-view>
</template>
<script setup lang="ts">
import {ref,watchEffect} from "vue";
import { useRoute } from 'vue-router';
// 定义缓存的视图数组
const cachedViews=ref<string[]>([])
const route = useRoute();
// 监听路由变化
watchEffect(() => {
  const name = route.name as string;
  if (route.meta.keepAlive) {
    if (!cachedViews.value.includes(name)) cachedViews.value.push(name);
  } else {
    const index = cachedViews.value.indexOf(name);
    if (index > -1)cachedViews.value.splice(index, 1);
  }
});
</script>
相关推荐
睡美人的小仙女1271 小时前
在 Vue 前端(Vue2/Vue3 通用)载入 JSON 格式的动图
前端·javascript·vue.js
yuanyxh1 小时前
React Native 初体验
前端·react native·react.js
程序视点1 小时前
2025最佳图片无损放大工具推荐:realesrgan-gui评测与下载指南
前端·后端
程序视点3 小时前
2023最新HitPaw免注册版下载:一键去除图片视频水印的终极教程
前端
喔烨鸭3 小时前
前后端分离情况下,将本地vue项目和Laravel项目以及mysql放到自己的云服务器
vue.js·mysql·laravel
小只笨笨狗~4 小时前
el-dialog宽度根据内容撑开
前端·vue.js·elementui
weixin_490354344 小时前
Vue设计与实现
前端·javascript·vue.js
烛阴5 小时前
带你用TS彻底搞懂ECS架构模式
前端·javascript·typescript
卓码软件测评6 小时前
【第三方网站运行环境测试:服务器配置(如Nginx/Apache)的WEB安全测试重点】
运维·服务器·前端·网络协议·nginx·web安全·apache
龙在天6 小时前
前端不求人系列 之 一条命令自动部署项目
前端