缓存路由组件，让组件来回切换时数据不会“消失“

最新推荐文章于 2024-03-21 14:30:33 发布
原创 最新推荐文章于 2024-03-21 14:30:33 发布 · 1.6k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

本文介绍了如何在Vue应用中使用`keep-alive`来缓存路由组件，防止数据丢失。通过包含特定组件或一组组件，确保组件在切换时保持挂载状态，提升用户体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

例：在当前组件的输入框输入数据时切换到另一个组件在重新切换到输入框组件，之前所在输入框输入的数据会消失。这是因为从一个组件切换到另一个组件的时候，原来的组件连同组件中已有的数据会一起销毁掉，再次切换回来时需要重新创建该组件，但是vue可不记得我们之前输入的数据。这种情况就需要缓存路由组件。
缓存路由组件
1.作用:让不展示的路由组件课持挂载，不被销毁。

2.具体编码:

如果不写include则缓存改位置的所有组件
缓存一个组件写法
<keep-alive include="News " >
	<router-view></router-view>
</keep-alive>
缓存多个组件写法
<keep-alive :include="['News', 'Message']" >
	<router-view></router-view>
</keep-alive>
Vue - 完美解决 Router 路由跳转传参（对象 / 数组）目标页面刷新后参数丢失问题，无论如何刷新页面参数都会存在不会消息的解决方案（详细示例代码，一键复制运行）
🏆 前端领域优质创作者
03-23 5337
前言 例如，有个列表页，点击后携带参数进入详情页，当刷新详情页后，携带的参数就获取不到了。 我们要的是，无论怎么刷新目标页面， 都不会出现获取不到的情况，如下图所示： 解决方案 如果通过query的方式传递对象或数组，在地址栏中会被强制转换成[objectObject]，所以获取不到。 但您可以通过将对象参数，通过JSON.stringify()方法进行转换， 在接收页（目标页）使用JSON.parse()再转回来。 //列表页 constdata={type:'a1
vue+elementui tab切换丢失参数
weixin_48271592的博客
06-30 3505
vue+elementui列表跳详情后，点其他菜单进行tab切换丢失详情页参数
vue中如何实现子组件相互切换,而且数据不会丢失
最新发布
qq_33449702的博客
03-21 1127
今天的项目场景: 项目为数据报表,但是一个父页面中有很多的子页面,而且子页面中不是相互关联,但是数据又有联系.
如何让Vue组件在router路由跳转离开后仍然保持组件状态，不被销毁
LLL3189860667的博客
09-07 3380
为了不让组件在我们路由跳转离开时频繁销毁，回来的时候频繁创建。2.作用：保持组件状态。
vue路由跳转时，旧组件会被销毁吗
m0_52364694的博客
11-19 3693
默认vue会销毁旧组件
vue跳转路由时，定时器不能及时清空的问题
weixin_43794749的博客
08-19 833
该方法是通过$once这个事件侦听器器在定义完定时器之后的位置来清除定时器。以下是完整代码： const timer = setInterval(() =>{ // 定时器操作 }, 500); // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。 this.$once('hook:beforeDestroy', () => { c.
vue实现抽屉功能 点击其他地方不消失 动画实现
weixin_47353884的博客
08-17 993
<div class="drawer"> <div class="setbox" :class="{show: isshow}"> <div class="header"> <p class="fl">标题</p> <button class="off" @click="close">关闭</button> </div> .
浏览器刷新时vue第一个组件传到第二个组件的值消失了怎么解决？
TangMonk的博客
08-07 497
1. 在`Login.vue`组件中，当你想要传递的值发生变化时，使用`localStorage.setItem`方法将该值存储到`localStorage`中。2. 在`index.vue`组件中，在需要获取传递的值的地方，使用`localStorage.getItem`方法来获取该值。使用浏览器的本地存储（如。，导致之前在第一个组件。）来在刷新时保留数据。
Vue 路由缓存 防止路由切换数据丢失 路由的生命周期
生产队的驴
11-17 1540
在 < router-view >展示的内容都不会被销毁，路由来回切换数据也不会丢失，但是这样写使用在 < router-view >展示的路由都会被缓存。在切换路由的时候，如果写好了一丢数据在去切换路由在回到写好的数据的路由去将会丢失，这时可以使用路由缓存技术进行保存，这样两个界面来回换数据也不会丢失。
Vue-Router实现带参数跳转，并且保存原页面数据记录
weixin_61933613的博客
03-07 2663
摘要：Vue项目中有个小需求，从A页面带多个参数跳转到B页面，B页面使用出入参数查询并显示，同时再次切换到A页面时依然记忆原有的数据。
vue路由跳转参数丢失
娄小研的博客
01-06 844
// 传参 toDetail(){ this.$router.push({ name:"newsDetail", params:{content:item}//传递过去的参数 }) } // 取参 this.$route.params.comtent 这种参数会丢失 // 传参 this.$router.push({ path: "/newsDetail", query: { .
页面切换表单数据不清空
qq_32886855的博客
09-04 258
beforeRouteLeave() 函数中将表单数据保存到sessionStorage中。created() 函数中将保存在sessionStorage的数据重新赋值给表单。表单填写后，切换tab页再切回该页面时，表单内容依旧存在。
VUE 组件切换，数据不变问题
qq_26330543的博客
12-11 1522
组件复用问题 这里就写代码了，因为问题相对简单，但是不记录又容易找不到问题，所以在此记录，加深记忆 VUE组件复用时，经常会发生界面切换，发现数据没有变化(两个切面组件是一样的被复用了，复用的目的是提升渲染效率)，这时只需要针对组件的增加一个key就好(Diff算法)， 实际所有的v-for 循环都建议绑定 :key 属性，以提升运行效率 ...
vue-router切换，组件不销毁
samll_redhat的博客
01-14 1万+
需求：后台管理系统，切换菜单时需要一部分页面刷新，一部分不刷新（其实就是组件销毁问题） 首先，我们需要在router-view标签外再包上一层标签keep-alive <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> &...
功能问题：如何解决跳同一路由组件时页面不变？
专注于前后端技术知识分享。
01-26 1589
Vue Router默认情况下，会复用相同组件的实例，而不是销毁和重新创建它们。所以会出现，多次跳转同一路由组件时页面不更新的问题。
vue单页面实现路由跳转后保留原页面数据
热门推荐
weixin_51958039的博客
10-24 1万+
在设置keep-alive缓存的组件中，首次进入组件，会一次调用组件的钩子函数：created --> mounted -->activated 再次进入时，只触发activated钩子函数。2.在路由选项中，配置meta属性，keepAlive为true即为需要缓存的组件，同时设置isBack属性，用来标示页面是否是从详情页面返回的。该步骤可以让一个组件里的值传到另一个组件里，不需要父子关系。页面的缓存，需要用到vue的内置组件keep-alive，来缓存列表页面，同时配合路由选项来更改页面的数据。
vue3+ts+vite实现动态路由（包括解决刷新页面路由丢失）
qq_44928780的博客
12-01 3215
vue3+ts+vite实现动态路由（包括解决刷新页面路由丢失）
vue单页面，多路由，页面跳转但不清除之前页面的记录
heartxq的博客
07-20 3328
【router-view】 + 【keep-alive】单页面多路由 实现component跳转但不覆盖原来页面记录 【router-view】用于页面渲染指定路由对应的组件 <router-view></router-view> 假如所有组件都要缓存历史记录，实现返回该组件时能显示原始记录，则可以直接套上【keep-alive】,此component中涉及的所有组件都会被缓存。 <keep-alive> <router-view></rou
vue移动端使用路由跳转到新页面，返回后旧页面数据保持不变
qq_44731369的博客
05-09 6382
使用keep-alive 1、在项目的app…vue文件中添加keep-alive <template> <div id="app"> <!-- <router-view/> --> <!--缓存想要缓存的页面，实现后退不刷新--> <!--加上v-if的判断，可以自定义想要缓存的组件，自定义在router里面--> <keep-alive> <router-view v
vue3 vue-router 来回切换路由 数据丢失
07-28
2. 使用 keep-alive 组件：Vue 提供了 keep-alive 组件，它可以缓存组件的状态，使得在切换路由时组件不会被销毁。这样可以保留组件的数据。 3. 使用路由导航守卫：Vue Router 提供了路由导航守卫，你可以在路由...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

igxia

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

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

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

打赏作者

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

抵扣说明：

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

余额充值