VUE3路由缓存 router-view和keep-alive

最新推荐文章于 2025-04-17 19:42:34 发布
原创 最新推荐文章于 2025-04-17 19:42:34 发布
· 1.1k 阅读 · 0 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue 

<router-view v-slot="{ Component }">
//动画效果
    <transition :name="$route.meta.transition || 'fade'" mode="out-in">
        <keep-alive :include="keepAliveList" :max="20">  
//需要缓存
           <component :is="Component" v-if="$route.meta.keepAlive" :key="$route.path" />
        </keep-alive>
    </transition>
//不需要缓存
    <component :is="Component" v-if="!$route.meta.keepAlive" :key="$route.path" />
</router-view>

keep-alive的include：仅缓存include里的页面

Cmddd豆
关注
vue3 使用vue-router
天天的博客
12-08 5084
这个步骤，我给大家 1，安装 npm i vue-router@next --save 2, main.js 中 import { createApp } from 'vue' import App from './App.vue' import {createRouter,createWebHashHistory} from "vue-router" import rongrong from "./components/rongrong.vue" import HelloWorld fr..
Vue 中 keep-alive 组件与 router-view 组件的那点事
vv_bug
12-01 3930
最近项目中有小伙伴找到我，问我“为啥他写的页面第一次进去可以触发 onCreate 函数，第二次再进的时候就不触发了呢？”（因为我们项目是一个大型的项目，每个开发可能只接触到自己开发的一小部分），然后我就说你可以试着在 activated 钩子函数中做处理，然后他又接着问我“activated 钩子函数又是怎么调用的呢？”，ok！这小子是问上瘾了，我们下面就来详细解析一下。 keep-alive <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <tra
keep-alive 和 router-view 的使用方法（Vue3）
weixin_46022934的博客
04-14 8123
一、router-view： 1. 常规使用方法 2. 非常规使用方法（插槽） 3. 非常规使用方法（结合keep-alive） 4. 命名路由👇🏻🔗（name字段） 二、keep-alive： 1. keep-alive解释如下： 2. keep-alive用法如下（贼简单）： 3. keep-alive对应的一些属性如下： 一、keep-aliv中的 include 和 exclude ①. include和exclude的含义 ②. 使用代码如下(exclude用法一致，含义不同)： 二、kee
vue3前端路由缓存实现
最新发布
i_am_a_div的博客
04-17 1190
vue3前端路由缓存实现；页签实现缓存；tab实现缓存
keep-alive的深入理解与使用(配合router-view缓存整个路由页面)
强哥叨逼叨
01-25 8416
原文来自:http://blog.myweb.kim/vue/keep-alive/?utm-source=origin转载请注明出处。 在搭建 vue 项目时，有某些组件没必要多次渲染，所以需要将组件在内存中进行‘持久化’，此时<keep-alive>便可以派上用场了。<keep-alive>可以使被包含的组件状态维持不变，即便是组件切换了，其内的状态依...
vue3中如何使用keep-alive缓存router-view组件
weixin_42289273的博客
12-11 217
【代码】vue3中如何使用keep-alive缓存router-view组件。
vue3中keep-alive和vue-router的结合使用
weixin_53068161的博客
05-21 9996
vue3中keep-alive和vue-router的结合使用前言代码一、为何要使用keep-alive？二、vue2中使用keep-alive将“router-view”组件包含于“keep-alive”即可三、vue3中使用keep-alive四、keep-alive属性“include，exclude”的使用。 前言 keep-alive：Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。 router-view：vue-router内置组件， 如果直接包含在keep-alive里
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
10-17
本文将详细介绍如何配合`router-view`使用`<keep-alive>`来缓存整个路由页面。 首先，`<keep-alive>`是一个抽象组件，它的主要作用是将被包含的组件保留在内存中，避免在组件切换时销毁和重建。这在处理那些数据量...
keep-alive不能缓存多层级路由菜单问题解决
11-21
在Vue.js应用中，`keep-alive` 是一个特殊的组件，用于缓存组件的状态，使得在切换路由后，之前的状态能够被保留下来，提高用户体验。然而，在多层级路由菜单的场景下，`keep-alive` 可能无法正常工作，尤其是在三层...
深入理解vue-router之keep-alive
08-29
在 Vue Router 中，Keep-Alive 通常用于缓存路由视图组件，以便在路由切换时避免重新渲染。下面是一个基本的使用示例： ```html <keep-alive> <router-view> <!-- 所有路径匹配到的视图组件都会被缓存！ --> </...
keep-alive、router-view
qq_46302247的博客
03-09 2376
当keep-alive存在时， activated，deactivated才会被调用； 默认情况下，当路由(浏览器url)改变时，改变前的路由 所映射的组件(假设是组件A) 会被销毁(destroyed回调)，组件A 的data中保存的变量都会被销毁；但是当有keep-alive时，组件A 不会被销毁，只会调用deactivated，所以组件A 的data中保存的变量和值都被缓存了，再次回到组件A时，会执行activated，而不会执行created，之前保存的data值也没改变； 注意：假设 路由A对应组
keep-alive 和 router-view
大连赵哥的博客
04-24 1428
keep-alive 和 router-view
VUE3-------路由缓存
weixin_45155276的博客
06-01 2852
VUE3-------路由缓存 文章目录VUE3-------路由缓存问题一、vue3中路由的使用setup中使用route或者是router实例二、解决问题1.使用watch监听解决路由缓存问题1.技术实现：2.代码落地：2.使用key去解决路由缓存问题1.使用：找到路由出口 加一个key属性2.基础原理3.使用方法选择 问题 路由缓存问题： path不变的情况下 vue-router会选择就地复用组件 导致组件不会重新渲染 钩子函数不会再次执行 ajax请求不会再次发起 提示：以下是本篇
Vue3 中 keepAlive 如何搭配 VueRouter 来更自由的控制页面的状态缓存?
xdididi的博客
08-24 2382
在 vue 中,默认情况下，一个组件实例在被替换掉后会被销毁。这会导致它丢失其中所有已变化的状态——当这个组件再一次被显示时，会创建一个只带有初始状态的新实例。但是 vue 提供了 keep-alive 组件,它可以将一个动态组件包装起来从而实现组件切换时候保留其状态。本篇文章要介绍的并不是它的基本使用方法(这些官网文档已经写的很清楚了),而是它如何结合 VueRouter 来更自由的控制页面状态的缓存。
关于keep-alive与router-view一起使用，子组件渲染两次
weixin_43914605的博客
12-08 5014
keep-alive、router-view动态路由一起使用出现的问题
vue3 实现路由缓存
qq_67572731的博客
09-12 835
【代码】vue3 实现路由缓存。
vue3实现路由缓存
weixin_43432689的博客
05-10 7156
vue3实现路由缓存
Vue3缓存两种：路由缓存与Pinia状态缓存
m0_64469199的博客
04-09 1578
单页应用中，最令人头疼的就是页面刷新或者回退时，数据丢失或重新加载的问题。本文以微小demo介绍两种缓存以应付Vue3项目中的绝大多数需要缓存的业务。
全网最细！Vue3实现路由缓存~
SiShen654的博客
11-26 4393
这是最重要的一个函数，因为缓存组件的时候 keep-alive 会根据组件名称进行缓存，假设现在有个。需要在全局状态管理中，或者当前组件中添加数据（本次演示在全局状态管理中，使用的是 pinia）组件（名称为 A，如果不使用选项式写法，Vue3默认将组件名称作为组件的 name）两个路径的时候，会导致访问的都是已缓存的组件，不会重新进行挂挂载渲染。因此需要该函数保证不同路径下，即使组件相同，也能进行重新挂载和缓存。这个是 Vue3 的写法，不适用与 Vue2。在根组件 App.vue 中引入进来。
vue3router-view使用keep-alive怎么写
03-21
<think>好的，我需要帮助用户了解在Vue 3中如何用keep-alive包裹router-view，并提供示例代码和注意事项。首先，我得回忆一下Vue 3的相关知识，特别是关于路由和组件缓存的部分。 根据用户提供的引用，特别是引用[2]，提到可以使用Vue Router的meta字段来标记需要缓存的组件，然后在router-view外层包裹keep-alive。但用户需要的是Vue 3的具体实现方法，可能和Vue 2有所不同，比如组合式API和语法上的变化。 首先，Vue 3中keep-alive的使用方式和Vue 2类似，但可能需要注意一些语法调整。比如，在Vue 3中，<keep-alive>的include和exclude属性仍然有效，但可能需要结合路由的meta字段来动态控制哪些组件需要缓存。例如，可以在路由配置中添加meta.keepAlive作为标记，然后在模板中使用v-if或动态绑定include来匹配组件名。 接下来，示例代码部分。用户提供的引用[3]和[4]中有Vue 2的路由配置示例，但需要转换为Vue 3的格式。Vue 3中创建路由使用的是createRouter和createWebHistory，而不是new Router。同时，组件导入方式可能保持不变，但需要注意Vue 3的组件定义方式，比如使用defineComponent。 然后，注意事项方面，需要提到在Vue 3中，组件名称的显式声明很重要，因为keep-alive的include和exclude依赖组件名。另外，使用组合式API时，可能需要使用onActivated和onDeactivated生命周期钩子来处理缓存状态下的逻辑。还有，动态路由参数的情况需要注意，如果不同参数需要不同缓存，可能需要更复杂的处理，比如通过key属性来区分。 还需要检查是否有其他潜在问题，比如内存管理。如果缓存太多组件，可能会影响性能，因此建议合理使用meta字段来控制哪些页面需要缓存。此外，Vue 3的<router-view>可能需要包裹在<keep-alive>内部，结构上是否正确，例如是否有额外的父元素影响布局。 最后，生成相关问题，可能需要涵盖性能优化、特定场景的应用、钩子函数的使用等，以帮助用户进一步学习。</think>### Vue 3 中使用 keep-alive 包裹 router-view 的实现方法 在 Vue 3 中，通过 `keep-alive` 包裹 `router-view` 可以实现组件缓存，提升页面切换性能。以下是具体步骤和示例代码： --- #### 1. **路由配置：标记需要缓存的组件** 在路由配置中，使用 `meta` 字段标识需要缓存的页面。例如： ```javascript // router/index.js import { createRouter, createWebHistory } from &#39;vue-router&#39;; import Home from &#39;../views/Home.vue&#39;; const routes = [ { path: &#39;/&#39;, name: &#39;Home&#39;, component: Home, meta: { keepAlive: true } // 标记需要缓存 }, { path: &#39;/about&#39;, name: &#39;About&#39;, component: () => import(&#39;../views/About.vue&#39;), meta: { keepAlive: false } // 不缓存 } ]; const router = createRouter({ history: createWebHistory(), routes }); export default router; ``` --- #### 2. **在 App.vue 中动态绑定 keep-alive** 通过 `v-if` 和 `:include` 动态控制缓存逻辑： ```vue <!-- App.vue --> <template> <router-view v-slot="{ Component }"> <keep-alive :include="cachedViews"> <component :is="Component" v-if="$route.meta.keepAlive" /> </keep-alive> <component :is="Component" v-if="!$route.meta.keepAlive" /> </router-view> </template> <script> import { computed } from &#39;vue&#39;; import { useRoute } from &#39;vue-router&#39;; export default { setup() { const route = useRoute(); // 根据路由的 meta.keepAlive 决定是否缓存 const cachedViews = computed(() => route.matched.filter(r => r.meta.keepAlive).map(r => r.name) ); return { cachedViews }; } }; </script> ``` --- #### 注意事项 1. **组件名称必须显式声明** `keep-alive` 的 `include` 依赖组件 `name` 属性。确保路由组件通过 `name` 字段定义： ```javascript export default { name: &#39;Home&#39;, // 必须与路由配置中的 name 一致 // ... } ``` 2. **处理动态路由参数** 若同一组件需要根据参数缓存不同实例，可通过 `key` 区分： ```vue <keep-alive :include="cachedViews"> <component :is="Component" :key="$route.fullPath" /> </keep-alive> ``` 3. **生命周期钩子** 缓存的组件会触发 `onActivated` 和 `onDeactivated` 钩子（需在 `setup()` 中使用）： ```javascript import { onActivated, onDeactivated } from &#39;vue&#39;; export default { setup() { onActivated(() => { console.log(&#39;组件被激活&#39;); }); onDeactivated(() => { console.log(&#39;组件被卸载但缓存&#39;); }); } }; ``` 4. **内存管理** 避免过度缓存，可通过 `exclude` 或动态修改 `meta.keepAlive` 清理不需要的缓存。 ---
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值