Vue缓存路由组件

最新推荐文章于 2025-03-20 21:04:54 发布

原创最新推荐文章于 2025-03-20 21:04:54 发布 · 448 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

本文介绍了如何通过在Vue Router中使用<keep-alive>标签，通过include属性指定要缓存的组件名，避免路由切换时前一个组件被销毁，提升用户体验。

因为每次点击切换路由组件会使之前的路由组件销毁。

目的为了让之前的路由组件不销毁，

则在<router-view>外面包含一个<keep-alive include:"name"><router-view></router-view></keep-alive>

include里面的的name是你要不被销毁的组件name

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

qq_52200979

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue2进阶 - 插槽、路由、缓存组件

qq_52320796的博客

04-09

1756

本主题围绕 Vue 2 的三大核心功能展开，帮助开发者深入理解并掌握插槽、路由和缓存组件的使用方法及其在实际项目中的应用

Vue3 路由缓存实战：从基础到进阶的完整指南

最新发布

weixin_66591252的博客

08-15

840

本文介绍了Vue3中实现路由缓存的完整方案。通过<keep-alive>组件结合路由元信息meta.keepAlive，可以轻松实现组件状态保留。关键点包括：1) 在路由配置中标记需要缓存的组件；2) 使用route.fullPath作为key避免缓存冲突；3) 通过include/exclude精确控制缓存范围；4) 利用onActivated/onDeactivated处理缓存组件的生命周期。此外还介绍了动态缓存控制、滚动位置保持、手动清除缓存等进阶技巧，帮助开发者构建更流畅的用户体验。

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

vue缓存路由组件

Canace_Xyxjjcaw的博客

03-29

1379

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

vue——缓存路由组件

cc_xxo的博客

03-05

265

让不展示的路由组件保持挂载，不被销毁为了预防在使用同一个 <router-view></router-view> 的情况下，路由来回跳转导致之前写的数据会被清除，其实是路由跳转后之前的组件被销毁了使用 <keep-alive>……</keep-alive> 标签包裹 <router-view></router-view> 跳转后组件不会被销毁从而数据也不会消失例如 <keep-alive> <router-vi

Vue Router 路由动态缓存组件

猫老板的豆

04-13

4030

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

vue路由组件缓存

libufan的博客

12-21

653

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

vue 缓存路由组件

MCCLS的博客

07-31

405

要点：注意要在router-view外面包我们在后面设置三个输入框,我们之前说过当切换路由的时候,会对前面那个组件进行销毁所以这边写入的1 2 3 再次切回来也就没了我们这边要分清我们这最终是在home的展示区所以在home的展示区进行操作只要它的router-view外面包上一个keep-alive标签如果直接这样写表示缓存router-view里面的所有组件,也就是切换路由时组件不被销毁写了include的话就缓存写了的组件，注意这边写的是组件名 ...

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

10-14

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

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

10-14

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

vue 路由子组件created和mounted不起作用的解决方法

10-16

`keep-alive`组件是Vue中用于缓存组件状态的一种机制，它使得在路由切换过程中，特定组件的状态得以保留，而不是每次切换都重新创建和销毁。然而，这可能会导致`created`和`mounted`钩子不再按预期执行，因为被`keep...

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

10-15

主要介绍了vue路由缓存的几种实现方式,结合实例形式详细分析了vue.js路由缓存常见实现方式、使用技巧与操作注意事项,需要的朋友可以参考下

Vue——缓存路由组件

Guuiabc的博客

02-01

221

1. 作用：让不展示的路由组件保持挂载，不被销毁。不包括在include里的依旧会被销毁。include里的名字为组件名！组件在哪里展示就在哪里更改代码。### 10.缓存路由组件。

【vue笔记】缓存路由组件

ONLYSRY的博客

07-09

241

1. 作用：让不展示的路由组件保持挂载，不被销毁。

vue中缓存路由组件

热门推荐

诗水人间

06-14

13万+

通过keep-alive的缓存路由组件，切换路由时原来的路由组件中的数据也会和数据一起保存下来。这样就能做到切换路由，不用重新从后台获取数据，直接使用刚刚缓存的数据 <keep-alive> <router-view></router-view> </keep-alive> ...

Vue组件及路由缓存

weixin_小白鼠的博客

07-11

447

vue组件及路由的缓存：全部路由的缓存，部分路由缓存；单个路由的缓存keep-alive的属性及使用注意

vue 实现部分路由组件缓存

weixin_30879833的博客

04-27

159

为了组件间相互切换不会重复加载数据，影响用户体验，我们通常需要将组件的数组实现缓存。这也是vue组件优化的一个重要方法首先看一下路由部分的写法： App.vue 组件写法 desc: 部分路由的缓存；如果想全部实现缓存可以直接用<keep-alive></keep-alive> 标签将 <router-view></router-v...

vue-router 缓存路由组件对象、this.$destroy() 销毁缓存组件实例

muzidigbig的博客

11-26

1987

一些组件需要通过接口请求数据来进行显示,请求数据会造成一定的等待时间，如果反复切换组件,那就需要反复进行数据请求,并且这部分数据返回时相同的；那么可以在组件第一次加载时,将组件对象缓存起来当切换路由显示时,组件对象被缓存起来,不被销毁,以提升再次查看时的用户体验。如:Tab页制作的各种状态的订单列表切换当然,这取决于你的数据是否需要较高的实时性。从A页面跳转到B页面，缓存A组件，从A组件跳转到C组件，取消缓存，如何实现？ this.$destroy()

vue3中如何缓存路由组件

weixin_53541596的博客

03-20

2287

vue3中如何缓存路由组件

Vue 缓存路由组件

10-08

333

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

vue3 使用keepalive缓存路由组件

06-24

我们正在讨论Vue3中如何使用keep-alive缓存路由组件。根据引用内容，我们可以总结以下几点：1.在Vue3中，使用keep-alive包裹router-view组件可以实现路由组件的缓存。2.可以通过include属性指定需要缓存的组件名...