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

最新推荐文章于 2025-11-05 21:48:42 发布

原创

最新推荐文章于 2025-11-05 21:48:42 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript

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

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>