vue路由学习-缓存路由组件

最新推荐文章于 2025-09-20 10:21:10 发布

原创最新推荐文章于 2025-09-20 10:21:10 发布 · 455 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue #路由

vue 专栏收录该内容

8 篇文章

订阅专栏

博客围绕Vue路由组件缓存展开。默认情况下，切换路由时组件对象会死亡释放并重新创建，而缓存路由组件对象可提升用户体验。还介绍了通过keep - alive控制router - view下的所有路由组件来实现缓存，以及在浏览器显示和用devtools查看效果。

1. 理解

1.1 默认情况下, 被切换的路由组件对象会死亡释放, 再次回来时是重新创建的

1.2 如果可以缓存路由组件对象, 可以提高用户体验

2. 编码实现

<keep-alive>
	<router-view></router-view>
</keep-alive>

keep-alive控制router-view下的所有路由组件

浏览器显示

使用devtools查看效果

devtools效果

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

doitba

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue路由（缓存，路由守卫，路由模式）

m0_49936845的博客

04-30

233

关于vue路由缓存清除在main.js中的设置

10-16

今天小编就为大家分享一篇关于vue路由缓存清除在main.js中的设置，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

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

Vue Router 路由动态缓存组件

猫老板的豆

04-13

4029

Vue Router 允许你缓存路由组件，这样在用户导航回之前的页面时，组件的状态会被保留而不是重新渲染。这可以通过使用组件来实现。是一个内置抽象组件，它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。它的主要作用是缓存不活动的组件实例，而不是销毁它们。当组件在包裹下被切换时，它的状态（包括数据、DOM 结构等）都会被保留，以便在下次重新显示时能够恢复之前的状态，而不是重新创建组件实例。根据路由的meta字段中的keepAlive属性来决定是否缓存组件。

Vue路由缓存三大解决方案

最新发布

Raising___的博客

09-20

659

通过路由守卫在路由更新前主动触发数据刷新，确保组件使用新路由参数重新获取数据，无需销毁重建组件。机制强制组件在路由变化时重新渲染，从而避免使用缓存的旧数据。）控制哪些组件需要缓存、哪些不需要，实现更精细的缓存管理。（或其他唯一标识），利用 Vue 的。包裹路由出口，并结合路由元信息（

vue路由组件缓存

libufan的博客

12-21

653

1. 理解 1.1 默认情况下, 被切换的路由组件对象会死亡释放, 再次回来时是重新创建的 1.2 如果可以缓存路由组件对象, 可以提高用户体验 2 .<keep-alive> <keep-alive>是Vue内置的一个组件，通常是用来保留数据状态或避免重复渲染，也就是我们说的缓存效果 <keep-alive> <component...

缓存路由组件

richest_qi的博客

03-10

1067

在路由的基本使用中我们介绍过：切换时，隐藏组件实质是销毁组件，显示组件实质是挂载组件。缓存路由组件，即keep-alive。用<keep-alive>标签将<router-view>包裹，隐藏组件时不会将组件销毁，组件依然挂载着。 <keep-ailve>标签上的属性include指定缓存哪个组件，其值是组件名。具体看个例子，本例基于使用router中的项目。修改路由组件Home.vue <template> <div> &

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

11-21

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

精选资源

vue-page-stack：Vue SPA的路由和导航。 Vue单页应用导航管理器

02-06

Vue页面堆栈 English | Vue SPA导航管理器将UI像本地应用程序一样缓存在SPA中，而不是销毁它。例产品特点 :dragon: 在vue-router上扩展后，原始导航逻辑保持不变 :soccer_ball: 当页面通过push或forward重新...

vue keep-alive 动态删除组件缓存的例子

10-16

根据提供的文件信息，以下是关于Vue中keep-alive组件缓存动态删除的知识点详细说明：首先，什么是Vue中的keep-alive组件呢？keep-alive是Vue提供的一个抽象组件，它主要用于缓存动态组件，避免组件切换过程中导致...

vue-element-admin中文版本

07-20

Vue-element-admin 是基于 Vue.js 的一套全面的后台管理系统模板，它利用了 Element UI 这个流行的 UI 组件库，提供了一系列预设的页面模板、路由、权限管理等功能，极大地加速了后台管理系统的开发过程。...

vue缓存路由组件

Canace_Xyxjjcaw的博客

03-29

1379

使用场景描述： news组件中有输入框，输入内容输入内容后切到message组件，再切回来，输入框中的内容不存在（因为切换路由时，组件会进行销毁） News的内容在Home中展示 include后面的引号里面是组件的名称，要和name相对应 ...

vue 路由缓存

BradenHan的专栏

02-22

3007

Vue Router 允许你在你的应用中创建多个视图，并根据路由来动态切换这些视图。这就引入了路由缓存的概念。然而，路由缓存也可能引发一些问题：内存消耗：缓存页面组件可能会导致内存占用增加，特别是如果应用有很多页面。数据过时：如果缓存的页面状态不及时更新，用户可能会看到过时的数据。交互问题：页面状态被保留可能导致一些交互问题，比如在某个路由上打开了一个弹出窗口，在切换路由后回来，弹出窗口可能仍然显示。生命周期问题：缓存的组件实例可能不会像重新创建的实例那样触发生命周期钩子，这可能会影响一些功能的

Vue 缓存路由组件

10-08

333

文章目录 Vue 缓存路由组件只需加入 <keep-alive> <router-view></router-view> </keep-alive> 点击about 并且输入点击home切换回来然后再点击about切换回来内容还在当我们在切换到home时候发现 about 还在只是隐藏...

路由组件缓存

liangaoyun的博客

02-23

689

目录组件缓存-匹配缓存组件缓存-新钩子函数组件缓存-匹配缓存路由不停的切换时，消失的页面会不停的创建和销毁，所有代码重新执行，效率不高所以要把组件缓存到内存，优化性能，只需要用keep-alive, 包裹切换的挂载点即可 <keep-alive> <router-view></router-view> </keep-alive> 在keep-alive的时候, 使用include/exclude区别缓存哪些组件 .

Vue中缓存路由

weixin_42202992的博客

03-07

216

缓存路由写法

Vue知识点：缓存路由组件

summer_cloudy的博客

03-15

222

【代码】Vue知识点：缓存路由组件。

路由 & 组件缓存

落魄校花的博客

07-24

361

VueRou 引入安装注册创建路由对象注入，将路由对象注入到实例中，建立关联 2 个核心步骤在对象中配置路由规则配置导航和路由出口（路径匹配的组件显示的位置）声明式导航导航链接 vue-router 提供了一个全局组件（取代 a 标签）：能跳转，必须配置属性指定路径，本质还是 a 标签，无需

vue3中如何缓存路由组件

weixin_53541596的博客

03-20

2285

vue3中如何缓存路由组件

Vue缓存路由组件

qq_52200979的博客

05-08

448

因为每次点击切换路由组件会使之前的路由组件销毁。目的为了让之前的路由组件不销毁，则在<router-view>外面包含一个<keep-alive include:"name"><router-view></router-view></keep-alive> include里面的的name是你要不被销毁的组件name ...

Vue中keep-alive组件缓存机制与源码解析

当某个组件被包裹在`<keep-alive>`标签内时，Vue不会直接将其销毁，而是将其卸载前的状态保存到内存中，当下次再次访问该组件时，直接从缓存中恢复，而不是重新执行组件的生命周期钩子如`created`、`mounted`等。...