vue3使用keeplive实现多页面缓存（1）

最新推荐文章于 2025-06-09 10:03:40 发布

chencaw

最新推荐文章于 2025-06-09 10:03:40 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue3 文章标签：前端 vue.js javascript

本文链接：https://blog.youkuaiyun.com/chencaw/article/details/127003486

vue3 专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了如何在Vue3项目中使用KeepAlive组件来实现路由组件的缓存，并展示了如何在HomeView和AboutView中添加输入框进行数据局部刷新。通过修改`app.vue`和路由配置，确保了不同页面间的高效切换和数据更新策略。

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

1、创建vue3的项目

(1)创建

vue create vue3_chen_multipage_test

（2）选择manual

（3）选项多选一些吧，哈哈

（4）后续一路回车

2、Keeplive的使用

（1）修改app.vue

注意使用了 :key="$route.name"

<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav>
  <!-- <router-view/> -->
  <!-- vue3.0配置 Component是固定写法-->
  <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component" :key="$route.name" v-if="$route.meta.keepAlive"/>
    </keep-alive>
    <component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive"/>
  </router-view>   
</template>

（2）修改HomeView.vue

主要是添加了一个input测试一下

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    需要部分刷新的数据：<input type="text" v-model="newStr" />
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
import {ref} from 'vue'

export default defineComponent({
  name: 'HomeView',
  components: {
    HelloWorld,
  },
  setup(){
    let newStr = ref('');

    return {
      newStr
    }
  }
});
</script>

(3)修改AboutView

主要是添加了一个input测试一下

<template>
  <div class="about">
    <h1>This is an about page</h1>
    about需要部分刷新的数据：<input type="text" v-model="aboutStr" />
  </div>
</template>

<script lang="ts">
  import {ref} from 'vue'
  export default {
      name: 'AboutView',
      setup(){
          let aboutStr = ref('');
          return {
            aboutStr,
          }
      }
  }
  </script>

（4）修改router

主要是添加了keepAlive: true

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'home',
    component: HomeView,
    meta:{
      keepAlive: true
    }
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue'),
    meta:{
      keepAlive: true
    }
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

3、测试一下页面的保存

(1)

(2)