Vue-Router路由动态缓存组件(keep-alive)，vue2/vue3不同写法

已于 2024-09-01 19:01:59 修改
阅读量2.1k 收藏 44
点赞数 49
分类专栏： vue2/3 从基础到起飞 文章标签： vue.js 前端 javascript 缓存 vue 前端框架 AI编程
于 2024-06-24 09:02:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_78542842/article/details/139841669
版权

 🚀 个人简介：某大型国企资深软件开发工程师，信息系统项目管理师、CSDN优质创作者、阿里云专家博主、华为云云享专家，分享前端后端相关技术与工作常见问题~

💟 作    者：码喽的自我修养❣️
📝 专    栏：vue2/3 从基础到起飞

🌈 若有帮助，还请 关注➕点赞➕收藏  ，不行的话我再努努力💪💪💪

🌈🌈文章目录

一、简介

它的主要作用是缓存不活动的组件实例，而不是销毁它们。 

基本用法 

生命周期钩子

二、定义是否缓存组件

三、缓存组件相关配置

1. 通过 :include 属性实现

vue2.x中

vue3.x中

2. 通过 v-slot 功能实现

3. 通过 v-if 来实现

四、注意事项


了解本专栏 订阅专栏 解锁全文 超级会员免费看
码喽的自我修养
关注
专栏目录
订阅专栏
vue keep-alive 动态删除组件缓存的例子
10-16
今天小编就为大家分享一篇vue keep-alive 动态删除组件缓存的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
深入Vue-Router路由嵌套理解
12-09
首先假设项目中有两个路由Profile和Posts，按写法把他们定义为一层路由，是Root的子路由，因此Root中要有router-view组件去承载子路由，才能实现子路由切换展示 一层路由 Root容器 <h1>Ro
vue 使用 keepAlive 坑
想成为大神的小白
12-13 5703
1. transition和keep-alive一起使用的时候要将transition作为keep-alive的父容器，否则keep-alive的效果出不来 2. 将需要缓存的页面在路由配置的meta中写上keepAlive: true,不需要缓存的就不用写 3. 有的页面需要缓存，有的页面不需要缓存，所以需要做判断。需要使用第二种方法，因为第一种方法在第一次进入页面的时候keep-a...
vue3 实现路由缓存
最新发布
qq_67572731的博客
09-12 613
【代码】vue3 实现路由缓存。
vue知识点——路由（跳转页面、传参、keep-alive路由缓存、路由守卫等）
TKY666的博客
08-07 4615
在 Vue 中路由就是控制显示哪个页面，通过路由显示的页面是显示在 App.vue 中的，当更改 URL 后只改变 App.vue 页面中路由部分对应的内容，也就是说通过路由显示时，也是属于局部刷新效果。注：在 App.vue 中通过显示路由内容。............
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
10-17
主要介绍了vue动态添加路由addRoutes之不能将动态路由存入缓存的解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue Router 路由动态缓存组件
猫老板的豆
04-13 2928
Vue Router 允许你缓存路由组件，这样在用户导航回之前的页面时，组件的状态会被保留而不是重新渲染。这可以通过使用组件来实现。是一个内置抽象组件，它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。它的主要作用是缓存不活动的组件实例，而不是销毁它们。当组件在包裹下被切换时，它的状态（包括数据、DOM 结构等）都会被保留，以便在下次重新显示时能够恢复之前的状态，而不是重新创建组件实例。根据路由的meta字段中的keepAlive属性来决定是否缓存组件。
vue的动态缓存组件
xjx0121的博客
09-22 413
【代码】vue的动态缓存组件。
vue-router 之 keep-alive
Winne_Shen的专栏
04-14 655
本文基于 Vue2.0keep-alive 简介keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。用法也很简单：&lt;keep-alive&gt; &lt;component&gt; &lt;!-- 该组件将被缓存！ --&gt; &lt;/component&gt; &lt;/keep-alive&gt; propsinclude -...
vue路由缓存（子路由缓存、动态路由缓存、滚动条相互影响）
m0_50278775的博客
04-20 4651
移动端中，我们浏览商品列表的时候，点击进入详情页面，然后返回到商品列表，一般都是用户浏览到哪里，返回来的时候还是那个位置(试想一下，如果一返回，页面重新刷新，你又要往上滑不知道多少页才能找到你刚刚的那款商品，这么一想是不是很崩溃），但是vue很贴心，给我们设计了keep-alive <keep-alive>包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们 keep-alive在vue2和vue3中还是有些区别的 在vue2中 <keep-alive> &.
vue3+webpack+vue-router路由封装+axios封装+vuex封装
05-23
vue3+webpack+vue-router路由封装+axios封装+vuex封装，下载资源中包括了vue3+webpack+vue-router路由封装+axios封装+vuex封装的相关代码，分别对vue-router路由进行了封装，对axios进行了封装，对vuex进行了封装，...
浅谈vue-router路由切换 组件重用挖下的坑
12-13
问题描述：vue-router导航切换 时，如果两个路由都渲染同个组件，组件会重（chong）用,组件的生命周期钩子不会再被调用,使得组件的一些数据无法根据 path的改变得到更新 翻车现场再现： 这是我的/router/index.js 的...
Vue动态组件和组件缓存
zep
03-01 2046
一、切换组件案例 比如我们现在想要实现了一个功能： 点击一个tab-bar，切换不同的组件显示； 这个案例我们可以通过两种不同的实现思路来实现： 方式一：通过v-if来判断，显示不同的组件； 方式二：动态组件的方式； 动态组件是使用 component 组件，通过一个特殊的attribute is 来实现： 这个currentTab的值需要是什么内容呢？ 可以是通过component函数注册的组件； 在一个组件对象的components对象中注册的组件； 二、动态组件的传值 如果是
vue动态路由缓存【前进刷新、后退缓存】
weixin_43837268的博客
07-29 3416
vue中，我们所要实现的一个场景就是： 1.搜索页面==>到搜索结果列表页时，搜索结果列表页面要重新获取数据， 2.搜索结果列表页面==>点击进入详情页==>从详情页返回列表页时，要保存上次已经加载的数据和自动还原上次的浏览位置。 缓存组件，vue2中提供了keep-alive。首先在我们的app.vue中定义keep-alive <keep-alive> <router-view v-if="$route.meta.keepA
vue-router 缓存路由组件对象、this.$destroy() 销毁缓存组件实例
muzidigbig的博客
11-26 1299
一些组件需要通过接口请求数据来进行显示,请求数据会造成一定的等待时间，如果反复切换组件,那就需要反复进行数据请求,并且这部分数据返回时相同的；那么可以在组件第一次加载时,将组件对象缓存起来 当切换路由显示时,组件对象被缓存起来,不被销毁,以提升再次查看时的用户体验。如:Tab页制作的各种状态的订单列表切换当然,这取决于你的数据是否需要较高的实时性。 从A页面跳转到B页面，缓存A组件，从A组件跳转到C组件，取消缓存，如何实现？ this.$destroy()
Vue动态组件和缓存组件
gyutdcu的博客
10-16 171
在开发中经常会有切换选项卡的业务需求，实现的方法有很多种，其中动态组件也是一种方式。动态组件有一个属性“is”，属性值可以是一个字符串，但里面的内容与组件名字一致。也可以通过绑定变量的方式在数据源中进行取值，根据业务需要决定显示哪一个组件。点击切换的时候执行了3个生命周期函数：先是原本的组件的beforeUnmount、unmounted，然后才是切换到的那个组件的mounted。这种方式存在着一个问题，就是切换之后再切回来，原本输入的内容就不存在了。这时候就有了缓存组件，用以解决这个问题。
Vue——动态组件、缓存组件keep-alive、异步组件
qq_52301431的博客
09-08 1539
有时候我们希望在A组件时用户做了一些操作，切换B组件时做了一些操作，当切回A组件时希望记住A的操作，不要重新创建A组件，keep-alive可以缓存动态切换的组件。在单页应用中，如果没有用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验。动态组件的切换，切换后是不会缓存之前被切换掉的组件的，每次切换新组件的时候，Vue 都创建了一个新的组件对象。==>使用场景： 上面的大分类，点了之后，去选择下面小分类，进行网络请求。
vue 路由缓存
shidouyu的专栏
12-12 1518
使用两个 router-view 标签分别作为缓存和不缓存的路由出口在路由配置的时候只需要给要缓存的页面加上 meta 属性然后添加 keepAlive 属性设置为 true 即可。同样直接用 keep-alive 标签包裹 router-view 标签然后使用 include 指定需要缓存的页面的 name 名称。直接用 keep-alive 标签包裹 router-view 标签就能缓存全部的页面了。注意是缓存页面的 name 名称而不是缓存页面路由的 name 名称。
评论 24
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

码喽的自我修养

您的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值