vue3项目 keepAlive 导致的切换tab页问题

柒柒不爱吃零食

已于 2024-05-15 16:52:14 修改

阅读量544

点赞数 3

文章标签： vue.js 前端 javascript

于 2024-05-15 16:50:47 首次发布

本文链接：https://blog.youkuaiyun.com/jiangchenW/article/details/138913764

版权

今天开发项目过程中发现，打开多个tab详情页后，详情页之间互相切换，数据没有刷新。查看控制台，发现详情页tab之间互相切换时，onActivated钩子函数只运行了一次，后续也并没有发送相应的请求

但是我明明在onActivated钩子函数中调用了数据请求函数，每次激活页面的时候就重新请求数据。

此时，我发现，在其他页面和详情页互相切换时，onActivated钩子函数被成功调用了。

猜想：可能是keepAlive将详情页（同一个组件，路由带的query不同）都视作同一个组件了，所以在详情页之间切换，组件一直都是出于激活状态，只在第一次会调用onActivated钩子函数。

查看代码：

果然，默认的组件名作为区分。

解决办法：给组件绑定key值即可

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

柒柒不爱吃零食

关注关注

3
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue keep-alive 保留切换后的状态，上一个状态，之前状态，tab切换

爱睡的虫虫

04-06

1932

keep-alive Props： include - 字符串或正则表达式。只有名称匹配的组件会被缓存。 exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。 max - 数字。最多可以缓存多少组件实例。用法：包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和相似，是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。当组件在 ...

vue3实现系统tab标签页面切换

蜗牛~~

08-23

1095

由于本系统的keepAlive实现没有用页面的name，而是用v-if条件判断哪些页面缓存就套个keepalive的壳，否则正常展示，因此，上面刷新的逻辑原理，需要配合下面的key值设置。如果，你们是通过设置页面name，结合include实现的缓存，就像下面这种形式，那么可以用v-if实现刷新。刷新的逻辑就是，在store里面存一个isReload的变量。使用的是element-plus中的el-tab组件，结构目录如下。右键显示功能菜单，写成了一个组件，在上面文件中进行引用。

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

vue——keep-alive的使用 tab切换

weixin_43551242的博客

04-20

981

vue——keep-alive

vue3项目如何使用keepAlive？如何实现回退到这个页面时不刷新，跳转至这个页面时会刷新？

最新发布

weixin_69924839的博客

03-17

413

只有第一次进入项目时，页面B加载一次，之后无论跳转还是切换都不刷新页面B了！页面A为首页面、页面B为设置了keepAlive的页面、页面C为新页面。页面B设置keepAlive，保证这个页面不刷新。实现回退B不刷新B,跳转至B页面会刷新B

iView-UI：利用keep-alive实现tabs标签切换时缓存页面

ZTao-z的博客

11-19

2484

问题后台数据量过大，需要分标签显示，在切换标签时不希望到后台重新拉取数据，需要做一个页面缓存解决方案 <template> <div> <Card> <Tabs @on-click="handleTabClick"> <TabPane label="module1"></TabPane&g...

【vue】使用了 keep-alive 的 include，但是切换 router-view，页面还是会刷新

qq_28597959的博客

06-11

1540

<keep-alive :include="cachedViews"> <router-view :key="key" /> </keep-alive> computed: { cachedViews() { return this.$store.state.tagsView.cachedViews }, key() { return this.$route.path } } 使用 vue-devtools

VUE3实现页面缓存，tab切换时不刷新

jiujiuyibai的专栏

06-22

5244

如上图所示，为了实现页面缓存，防止每次页面切换时重新刷新数据，前前后后尝试了多种写法，如上图被注释的那段写法，与没注释掉的写法，在router-view上主要是第一种写法有设置key属性，第二种没有，后面经过调试发现，在router-view上设置key属性，会导致keep-alive不生效。

解决vue-router 切换tab标签关闭时缓存问题

10-15

在Vue.js应用中，使用Vue Router进行页面导航时，可能会遇到一些关于页面缓存的问题，尤其是在涉及切换Tab标签时。本文将深入探讨如何解决Vue Router切换Tab标签时关闭页面仍保持缓存的状态。首先，Vue Router中的...

vue 实现tab切换保持数据状态

10-15

在Vue开发过程中，保持数据状态是常见的需求，特别是在实现Tab切换功能时，用户可能希望在切换Tab后，之前填写的数据或者加载的内容能够被保存。本文将深入探讨如何在Vue中实现Tab切换时保持数据状态。首先，让...

vue Tab切换以及缓存页面处理的几种方式

10-16

在使用Vue.js开发后台管理系统时，Tab切换和页面缓存是两个非常常见的需求。Tab切换允许用户在不同的页面或模块之间进行切换，而页面缓存则能够使得切换后的页面保持之前的页面状态，比如填写的表单信息和查询出的...

vue刷新页面如何保证路由不变_vue 刷新之后嵌套路由不变重新渲染页面的方法...

weixin_39834767的博客

12-20

5086

vue 刷新之后嵌套路由不变重新渲染页面的方法解决嵌套路由刷新时，路由没有变化，正常情况下页面是不会重新渲染的1、在router-view中加上条件渲染 v-if 默认为true。让它显示出来2、写写一个reload方法，在页面刷新只有，点击某个查询条件的时候调用这个重载的方法这是条件渲染变化了为false在修改数据之后使用 $nextTick，条件渲染变化了为true则可以在回调中获取更新后...

vue使用keep-alive不生效解决方案

qq_26311665的博客

05-29

2151

vue使用keep-alive不生效解决方案

转载：VUE3使用keep-alive页面切换时报错：TypeError: parentComponent.ctx.deactivate is not a function

我的米饭

11-01

1206

TypeError: parentComponent.ctx.deactivate is not a function

VUE3使用keep-alive页面切换时报错：parentComponent.ctx.deactivate is not a function

热门推荐

qq_15197419的博客

02-18

1万+

问题描述：这是官方示例代码： <router-view v-slot="{ Component }"> <keep-alive> <component :is="Component" v-if="$route.meta.keepAlive"/> </keep-alive> <component :is="Component" v-i

Vue3 之动态组件和KeepAlive组件

weixin_45092437的博客

05-28

3172

动态组件允许在同一挂载节点动态切换多个组件，可以根据具体条件，动态决定显示的组件。动态组件默认只保持当前组件存活，其余被切换掉的组件会被卸载，但可以结合KeepAlive组件实现被切换掉的组件保持存活状态。将KeepAlive组件包裹在动态组件的外层，当动态组件发生切换时，默认会将所有被切走的非活跃组件进行缓存，而不是销毁，并且组件内部的状态也会被保留。

缓存滚动位置：解决keep-alive组件缓存滚动位置失败问题

技术圈

07-19

3364

但是使用keep-alive缓存页面后，发现虽然页面缓存成功了，但是列表的滚动条又自动回到了最上方。怎样缓存滚动位置？这篇文章教会你。

vue3 keep-alive页面切换报错：parentComponent.ctx.deactivate is not a function

weixin_43422861的博客

11-29

302

这个时候我们只需在标签上添加 :key=" 唯一值" 就可以解决了，只要是唯一的就可以没有指定要求推荐使用 $route.name。

Vue使用keep-Alive实现从详情页返回到列表页，还能记住当前的page页码以及切换的tab选项

m0_59157023的博客

05-11

1351

到了这一步的时候以为缓存成功啦，然后试了一下(list.vue)查询某个字段：比如供应商，查询之后点击订单号跳转进详情页(detail.vue)，然后再返回订单列表页(list.vue)的时候依然重新请求数据，keep-alive设置页面缓存不起作用，这是怎么回事呢？为了在其他页面比如首页(home.vue)进入订单的列表页面(list.vue)，刷新页面中的列表数据和查询条件，我们将在activated钩子函数中挂在页面初次进入时的请求数据。1.首先，设置路由文件:route.js。

vue3 监听keepAlive的tab关闭

11-01

在 Vue3 中，如果你想监听 `keep-alive` 组件的 tab 关闭事件，`keep-alive` 是用于缓存组件状态以避免不必要的渲染，它本身并不直接提供 tab 关闭的监听功能。不过，你可以通过一些间接的方式来达到这个目的。一种常见的做法是在离开页面之前调用自定义的方法或者发送一个事件通知其他部分的代码。例如，你可以在路由守卫的 beforeDestroy 钩子里或者一个全局的 Vue 实例上添加事件处理器： ```javascript // 在路由守卫中 router.beforeEach((to, from, next) => { if (from.name && to.meta.isKeepAlive) { // 当从 keep-alive 区域离开时，假设有一个 'closeTab' 的方法 this.$emit('closeTab', to); } next(); }); // 或者在一个全局组件里 new Vue({ el: '#app', mounted() { window.addEventListener('beforeunload', () => { if (this.$route.meta.isKeepAlive) { this.closeTab(); } }); }, methods: { closeTab() { this.$emit('closeTab'); } }, }); ``` 然后在需要监听这个事件的地方，如一个单独的插件或者父组件，你就可以接收并处理这个 `closeTab` 事件： ```javascript // 在某个组件中 export default { created() { this.$on('closeTab', () => { console.log('Tab is closing'); // 在这里可以进一步执行清理操作、保存数据等 }); }, }; ``` 请注意，这种方法依赖于用户主动触发的浏览器卸载事件，不是所有浏览器都支持这个事件，也不是最佳实践，因为它可能会导致性能问题。如果需要更精确地控制 tab 的切换，通常建议使用 vuex 状态管理库或者专门的 tab 管理库来进行管理。