vue3切换路由后当前页面数据不变keep-alive

已于 2022-05-08 13:13:31 修改
阅读量1.2k 收藏 9
点赞数 1
文章标签： vue.js 前端
于 2022-05-08 11:52:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59642018/article/details/124645560
版权

keep-alive是什么

keep-alive是vue中的一个内置组件，主要是将组建缓存到内存中，避免切换路由的时候页面刷新从而倒是dom的重新渲染

使用方法

router文件中index加入

meta: {
      keepAlive: true
    }

上面和vue2的keep-alive的一致的，vue3keep-alive和vue2不同的地方在App.vue

<router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component"/>
      </keep-alive>
    </router-view>

 

vue2切换路由后当前页面数据不变keep-alive

vue2切换路由后当前页面数据不变keep-alive_幼稚鬼_Blog的博客-CSDN博客

幼稚鬼_Blog
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue页面切换后，内存未释放（通过缓存路由来解决）
weixin_43747076的博客
05-25 8828
keep-alive详解： 是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。 与 相似，只是一个抽象组件，它不会在DOM树中渲染(真实或者虚拟都不会)，也不在父组件链中存在，比如：你永远在 this.$parent 中找不到 keep-alive 。 第一种：缓存所有路由 <keep-alive> <router-view></router-view> </keep-al.
vue keep-alive请求数据的方法示例
08-27
Vue Keep-Alive 请求数据的方法示例 Vue Keep-Alive 是 Vue 框架中的一个功能强大且实用的机制，可以缓存组件的状态，减少不必要的组件重渲染，提高应用程序的性能。但是，在使用 Keep-Alive 时，可能会遇到一些...
VueRouter 同一个路由（复用同一个组件） 页面不重新加载解决办法
吴冬雪的博客
12-07 3829
【代码】VueRouter 同一个路由（复用同一个组件） 页面不重新加载解决办法。
vue3中使用keepAlive缓存路由组件不生效的情况记录
最新发布
weixin_40451732的博客
06-17 757
解决vue3中keepAlive缓存组件不生效的文案
Vue页面跳转保留数据
xy19950125的博客
11-07 7582
其实就一个属性而已 { path: '/netmoney/index', name: 'netmoney', component: netmoney, meta: { keepAlive: true // 需要被缓存 } }  
vue keepAlive状态保持
suuntil的博客
02-26 492
keepAlive状态保持 1 主要实现原理，状态保持的路由不会执行生命周期的钩子函数，只有第一次进入页面会执行钩子函数。 2 设置当前页面保持keepAlive 直接在路由meta中配置即可 meta{ keepALive:true } <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if.
Vue路由跳转到同一组件后，路由参数更新但是数据不更新
学而不思则忘
10-12 1390
当多个路由指向同一组件时，回出现路由跳转后，但是页面数据不刷新的问题。 查看官方文档，这是因为原来的组件实例被复用了。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。 这时可以使用下面方法对路由参数变化作出响应： watch(检测变化)$route对象： const User = { template: '...', watch: { $route(to, from) { // 对路由变化作出响应... .
【vue/cli3+】路由不变的情况下，刷新页面
梦想小筑
01-20 1633
【vue/cli3+】路由不变的情况下，刷新页面前言第一种：中转站的方式第二种：provide / inject 的方式 前言 在vue写的后台管理项目中，经常会有增、删、改、查的操作，这些操作只是跟用接口跟后台交互下，既然用接口交互，那肯定就是axios的异步请求，那么就是说后台数据发生了改变，但是前台的数据并没有实时的更新（每次操作完后台把列表数据重新返给你例外，但是这样的话每次交互的数据量就...
解决vue keep-alive 数据更新的问题
12-01
在Vue.js应用中，`<keep-alive>`组件是一个非常有用的特性，它允许我们缓存组件的状态，使得在切换路由时能快速恢复之前的状态，从而提高用户体验。然而，在实际使用中，`<keep-alive>`可能会引发一些数据更新的问题...
详解Vue路由开启keep-alive时的注意点
01-19
这个不是业务的要求，但是看到每次进入页面就重新渲染DOM然后再获取数据更新DOM，觉得作为一个前端工程师有必要优化下的加载逻辑，正好vue提供了keep-alive的功能，所以就试用了下。当然，干任何事儿都不会一帆风顺...
keep-alive不能缓存多层级路由菜单问题解决
11-21
在Vue.js应用中，`keep-alive` 是一个特殊的组件，用于缓存组件的状态，使得在切换路由后，之前的状态能够被保留下来，提高用户体验。然而，在多层级路由菜单的场景下，`keep-alive` 可能无法正常工作，尤其是在三层...
vue中keep-alive的用法及问题描述
12-29
在做电商有关的项目中，当我们第一次进入列表页需要请求一下数据，当我从列表页进入详情页，详情页不缓存也需要请求下数据，然后返回列表页，这时候我们使用keep-alive来缓存组件，防止二次渲染，这样会大大的节省...
vue keep-alive 动态删除组件缓存的例子
12-13
业务需求： 切换tab页标签的时候（路由前进的时候），缓存当前组件数据，关闭tab页标签的时候清除组件缓存。 实现： 1、先在store的state里面设置一个要缓存数组 2、在进到子页面的时候，更新store的数组，把将要...
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
10-17
《深入理解与使用keep-alive缓存路由页面》 在Vue.js开发中，有时我们需要保持组件的状态，避免在页面切换时重新渲染，提高用户体验。这时，`<keep-alive>`组件就显得尤为重要。本文将详细介绍如何配合`router-view...
基于vue中keep-alive缓存问题的解决方法
01-19
但是一般在路由上都会加上keep-alive保持数据的状态，除非强制无缓存刷新，这就导致第一次进入详情页面时，可以在created中拿到id，但是返回后，再点击进入，就不会再走相应的生命周期了，无法拿到新的id ...
vue组件 keep-alive 和 transition 使用详解
10-16
1. **`keep-alive`组件**：`keep-alive`的主要作用是缓存组件，使得组件的状态在切换时得以保留，避免每次切换都重新渲染DOM，提高性能。在`<keep-alive>`组件内部的动态组件(`<component>`)，当不活跃时，`keep-...
vue 切换路由 不能重复请求接口的问题
sonic
07-21 954
记录vue项目切换路由后不会重复请求接口的问题。
vue3 多个页面使用keepAlive
shoping110的博客
02-27 279
vue3 多个页面使用keepAlive
vue 使用keep-alive 三级以上的路由，无法缓存问题
xiao_yu_1的博客
03-04 2107
使用vue-element-admin脚手架做系统时，一般系统的侧边栏都是有父级，子级，子子级，发现使用keep-alive，当三级以上的路由时，无法缓存页面？？ 那首先要了解下keep-alive的作用是啥？ 是用来对页面组件进行缓存不缓存的处理，拥有缓存页面组件，再次进入时，使用原来已经加载好的内容，可以大大的节省请求和渲染时间，是个好东西！ 那它具体的属性有2种： include ,包含页面组件name的这些组件页面，会被缓存起来 exclude 除了这些name以外的页面组件，会被缓存起来 还有第3
Vue3切换路由页面冲加载被keep-alive缓存的组件
06-01
当使用 `keep-alive` 缓存组件时，组件的状态会被保留，从而可以在切换路由时快速恢复组件的状态。如果您希望在切换路由时重新加载被缓存的组件，可以使用 `watch` 监听 `$route` 对象的变化，在路由变化时手动调用组件的 `activated` 和 `deactivated` 生命周期钩子函数。 下面是一个示例，演示如何在切换路由时重新加载被缓存的组件： ```vue <template> <div> <h2>{{ title }}</h2> <p>{{ message }}</p> </div> </template> <script> export default { data() { return { title: '', message: '' }; }, created() { console.log('created'); this.loadContent(); }, activated() { console.log('activated'); this.loadContent(); }, methods: { loadContent() { // 发送异步请求获取数据 // 然后更新数据 this.title = 'Title'; this.message = 'Data loaded successfully'; } }, watch: { $route(to, from) { console.log('route changed'); if (from.name === this.$route.name) { this.$nextTick(() => { this.$options.activated.forEach(hook => hook.call(this)); }); } else { this.$options.deactivated.forEach(hook => hook.call(this)); } } } }; </script> ``` 在上面的示例中，组件在 `created` 钩子函数和 `activated` 钩子函数中加载数据，`watch` 监听 `$route` 变化，并在路由变化时手动调用组件的 `activated` 和 `deactivated` 生命周期钩子函数。注意，在调用生命周期钩子函数时，需要使用 `$options` 对象来访问它们。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值