vue2_路由05_缓存路由组件

与海boy

已于 2022-07-04 16:38:39 修改

阅读量277

点赞数

文章标签：前端 javascript 大数据

于 2022-07-04 16:36:50 首次发布

本文链接：https://blog.csdn.net/qq_44289784/article/details/125603189

版权

VUE_前端开发专栏收录该内容

18 篇文章 1 订阅

订阅专栏

缓存路由组件

应用场景
keep-alive 属性

应用场景

客户在某个页面填写表单时,想要切到其他页面做其他事,回来后希望自己填写的表单数据仍然存在。

keep-alive 属性

:include指定缓存组件的名称,无该属性则缓存router-view下所有组件

			<!-- 缓存多个路由组件 -->
			<!-- <keep-alive :include="['News','Message']"> -->
				
			<!-- 缓存一个路由组件 -->
			<keep-alive include="News">
				<router-view></router-view>
			</keep-alive>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

与海boy

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue2中组件的缓存

weixin_45724850的博客

07-15

1386

动态组件是指在Vue.js中可以根据条件或事件的变化，动态地切换渲染不同的组件。这样可以根据需要来加载不同的组件，并且可以提高代码的复用性和灵活性。只会对动态组件或手动设置了名称的组件进行缓存。包裹的组件在切换时会被缓存下来，而不会重新渲染和销毁。这样可以提高性能，避免重复的创建和销毁组件。动态组件的使用可以让我们根据不同的条件或事件来动态加载不同的组件，实现更灵活的界面交互和代码复用。是一个动态属性，根据其值的变化来动态渲染对应的组件。的值，以实现动态切换组件的效果。组件来实现组件的缓存。

vue 路由缓存路由嵌套路由守卫监听物理返回操作

10-14

在Vue Router中，我们可以通过组件来实现路由缓存。通常，会包裹标签，这样只有在中渲染的组件才会被缓存。通过在路由配置中添加meta字段来指定哪些路由需要缓存，例如，当我们希望某组件缓存时，可以在路由定义中...

参与评论您还未登录，请先登录后发表或查看评论

vue2 缓存组件＜keep-alive＞

weixin_46504400的博客

05-21

684

此外，这些生命周期钩子函数不会在组件首次挂载时触发，因为它们只对被缓存的组件有效。是一个内置组件，它允许您缓存不活动的组件实例，以便在需要时可以更快地重新渲染它们。当一个组件被包裹在标签中时，它的状态会被保留，而不是在每次切换时都重新创建。这意味着，如果您的组件有子组件，这些子组件也会随着父组件一起被缓存。组件提供了一些生命周期钩子函数，这些钩子函数可以在组件被缓存或激活时触发。这通常发生在组件被移除出DOM树时，或者当组件被手动销毁时。这通常发生在组件不再需要显示时，例如当它被另一个组件替换时。

黑马头条vue2.0项目实战（十一）——功能优化（组件缓存、响应拦截器、路由跳转与权限管理）

最新发布

weixin_56370772的博客

08-17

889

先来看一个问题？从首页切换到我的，再从我的回到首页，我们发现首页重新渲染原来的状态没有了。首先，这是正常的状态，并非问题，路由在切换的时候会销毁切出去的页面组件，然后渲染匹配到的页面组件。但是我想要某些页面保持状态，而不会随着路由切换导致重新渲染。

vue2进阶篇：vue-router之缓存路由组件

刘大猫

07-09

2246

vue2进阶篇：vue-router之缓存路由组件

vue2中使用keep-alive缓存router-view组件的3种方法

yhlhelloworld的博客

03-30

6341

首先先了解一下什么是keep-alive keep-alive:vue内置组件，包括不活动的实例;dom结构移除了；但是组件的实例没有被销毁；而是缓存起来了；注意：缓存的是组件的实例 1. 包括组件 2. 包括路由的坑 router-view 它有3个属性分别是： include - 字符串或正则表达式。只有名称匹配的组件会被缓存。 exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。 max - 数字。...

动态组件、缓存组件、异步组件-vue2

qq_47455650的博客

09-12

893

2、组件缓存起来：通过异步加载的组件会缓存起来，当你下一次再用到这个组件时，丝毫不会有任何的疑迟，组件很快会从缓存中加载出来。

vue相同路由跳转强制刷新该路由组件操作

10-14

Vue Router默认情况下，如果路由路径保持不变，它不会重新创建或销毁组件。为了实现强制刷新，可以采用以下两种方法： 1. **添加动态查询参数** 可以在路由跳转时添加一个动态查询参数，如当前的时间戳或随机数。...

vue动态添加路由addRoutes之不能将动态路由存入缓存的解决

10-17

另外，Vue Router 的缓存机制可能无法正确处理动态添加的路由，导致路由信息发生变化，如失去 `render` 方法或 `component` 属性，从而影响路由的正常工作。从缓存中读取的路由可能丢失关键信息，如父路由的 `...

详解vue-template-admin三级路由无法缓存的解决方案

11-21

在开发基于Vue的管理模板，如vue-template-admin时，可能会遇到一个问题，即三级路由的组件无法被正确缓存。这个问题主要涉及Vue Router的`keep-alive`特性，以及如何处理组件的缓存策略。 `keep-alive` 是Vue ...

vue路由缓存的几种实现方式小结

12-28

本文实例讲述了vue路由缓存的几种实现方式。分享给大家供大家参考，具体如下：在我们的日常开发中，有时候会遇到页面的缓存，特别是电商的项目，在商品列表的一些状态都是要缓存下来的。下面就简单介绍几种 vue ...

Vue2.0 Vue路由缓存路由组件

yasinawolaopo的博客

01-11

363

缓存路由组件中引出了<keep-alive>标签

vue2 如何用keepAlive做组件缓存

HaushoLin的博客

11-16

888

相信各位小伙伴在开发vue2项目时有这么一个需求，部分指定的组件需要做缓存，其他不需要。此时只需要在router/index.js路由里给需要做缓存的组件添加meta属性，同时设置上keepAlive为true和deepth深度修改为1，具体流程我们看下方代码。

vue2[初级] 路由缓存配置

u011664286的博客

09-24

317

VUE 路由缓存配置

Vue2组件的生命周期及缓存路由（keep-alive）

qq_60654563的博客

04-18

1579

Vue2组件的生命周期

Vue2：路由组件缓存技术

Brave_heart4pzj的博客

02-28

423

Vue

vue2跳转页面缓存

m0_72987844的博客

06-06

562

在 Vue 2 中，当你导航到不同的页面（通常是通过 Vue Router）时，默认情况下，Vue 会销毁当前组件的实例，并在导航回该页面时重新创建它。这意味着组件的状态（如数据、计算属性、方法等）将会丢失，除非你在路由配置中使用了某种形式的缓存。是 Vue 提供的一个内置组件，它可以缓存不活动的组件实例，而不是销毁它们。中，以便缓存路由组件。

Vue2/3路由缓存、-路由监听、-常见路由守卫

Climber_fe的博客

07-20

2274

在意性能问题，选择onBeforeRouteUpdate,精细化控制。复用导致生命周期不执行,onMounted不执行,新请求无法发送。路由缓存 —当路由只有参数变化时,会复用组件实例。不在意性能问题，选择key,简单粗暴。我欲乘风归去，又恐琼楼玉宇。

Vue SPA路由缓存问题及解决方案

"本文主要探讨了在Vue单页面应用（SPA）中遇到的路由缓存问题及其解决方案，重点讲解了如何利用Vue内置的`keep-alive`组件来实现页面缓存，以保持用户滚动位置和数据状态。" 在Vue的单页面应用（SPA）中，由于路由...