vue页面缓存后，切换菜单时页面数据显示错误

已于 2023-02-16 21:53:01 修改
阅读量551 收藏
点赞数
分类专栏： vue学习 文章标签： vue.js
于 2023-02-16 21:30:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_44842962/article/details/129071830
版权
文章描述了一个在具有筛选功能的报表详情页面中遇到的问题，即切换菜单后返回，页面显示的不是筛选后的数据。原因可能是路由参数在切换过程中丢失，特别是在使用query传递参数时。keepalive的渲染导致两个不同query的页面缓存，从而引起数据错乱。解决方案是改用params进行路由跳转，避免query数据丢失。

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

问题:页面是一个具有筛选功能的报表详情页，对报表进行筛选后，切换菜单显示别的页面后，再次回到报表详情页后，页面显示初次进入页面时的数据，不是筛选后的数据
原因:经过多次测试发现多次切换路由和首次进入时，路由参数不一致，缺少query中数据，结合每当路由发送变化，keepalive的render方法都会重新渲染，在控制台用vue插件，发现生成了两个报表详情页的缓存，两个缓存的路径只有query数据的不同，所以偶尔会显示页面数据错乱。至于路由变化的原因还没找到，猜测是进入详情页时使用了query路由传参，多次切换菜单后，再次进入详情页，可能导致query参数丢失。
解决办法:把路由跳转改成params不使用query，即可

vue切换路由页面数据缓存_Vue-Router实现前端页面缓存
weixin_33587161的博客
01-17 3461
一、使用情景在使用Vue开发单页面应用时，我们通常会使用Vue-Router进行页面导航，Vue-Router在进行路由切换的时候，页面是会重新加载，对应的生命周期函数也会再次执行一遍，但是在有些业务场景下，比如：在有分页数据列表中，切换到第三页需要查看列表对应数据的详情页面，然后返回，如果不加任何处理，列表页面会重新加载，默认显示第一页数据，而不在是之前的第三页，这样如果还需要查看之前查看数据的...
vue Tab切换以及缓存页面处理的几种方式
10-16
主要介绍了vue Tab切换以及缓存页面处理的几种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue 返回上一页报错：Can‘t read property ‘go’ of undefined，this.$router.go(-1)不起作用
yhj198927的博客
03-04 1703
1.报错如下： 2.解决方法：
Vue中使用路由互相切换页面时，页面数据丢失问题解决措施
qq_44215191的博客
03-05 332
keep-alive
关于Vue路由切换时中断上一个路由请求情况的处理
qq_40907752的博客
09-18 1935
开篇闲话 前两天做项目的时候遇到一个问题，那就是路由切换了但是上一个路由的请求依旧继续执行，导致页面卡顿，以及新的请求和之前请求一块发送非常影响性能。就想到了axios中可以使用cancelToken可以用来中断请求，于是记录下来以备不时之需（小白学习，还有很多不足，希望大佬可以指正！） 1、首先，由于我们要在store中对请求进行状态管理所以要在store中管理取消的请求操作 Store/index.js 2、然后在对axios进行二次封装，设置请求（request）和响应（response）的处理操
转载：VUE3使用keep-alive页面切换时报错：TypeError: parentComponent.ctx.deactivate is not a function
我的米饭
11-01 1199
TypeError: parentComponent.ctx.deactivate is not a function
VUE携带参数跳转并回显
qq_42980244的博客
08-18 1936
实现的功能：点击查看按钮会带参数跳转到新页面，并且要在新页面回显这一些数据（用户名，登陆时间等） 先看一下HTML的button是怎么写的 有一个方法： lookAdmin(i)，那我们去js里面看一下这个方法 lookAdmin(i){ let that = this; $.ajax({ type: "get", async: true, // 同步 一定会等数据返回 ...
解决vue-router 切换tab标签关闭时缓存问题
10-15
在Vue.js应用中，使用Vue Router进行页面导航时，可能会遇到一些关于页面缓存的问题，尤其是在涉及切换Tab标签时。本文将深入探讨如何解决Vue Router切换Tab标签时关闭页面仍保持缓存的状态。 首先，Vue Router中的...
Vue 路由切换时页面内容没有重新加载的解决方法
10-18
在使用Vue.js开发单页应用程序（SPA）时，页面组件在路由切换时通常会重新渲染以显示新的内容。但有时候，用户可能会遇到路由切换时页面内容没有更新的问题。这通常与Vue的生命周期钩子函数和keep-alive组件使用不当...
Vue在页面右上角实现可悬浮/隐藏的系统菜单
08-27
在子组件中，我们还需要定义`switchCancelBoard`方法来切换`showCancel`的值，以显示或隐藏菜单。 此外，`v-show`与`v-if`指令虽然都能控制元素的显示与隐藏，但`v-show`在任何情况下都会编译元素，只是通过CSS的`...
在使用vue3+vuex的时候初始化页面时会有这样的报错
weixin_65230316的博客
08-04 641
在vuex.js中预先定义数据解构，这样在解析时能够找到数据不报错，并在页面加载完成前更新数据。我遇到的这个问题的原因是在html中用到了vuex中映射的数据，代码如下。而这个数据是在mounted生命周期中通过fetch异步请求获得的。所以导致在解析html的时候未能找到tables.list对象。...
vue切换页面，前一个页面的异步方法还在继续执行
qq_41539807的博客
04-02 1998
vue切换页面，前一个页面的异步方法还在继续执行
vue移动端项目缓存问题实践
weixin_34228662的博客
10-28 1301
最近在做一个vue移动端项目，被缓存问题搞得头都大了，积累了一些经验，特此记录总结下，权当是最近项目问题的一个回顾吧！ 先描述下问题场景：A页面->B页面->C页面。假设A页面是列表页面，B页面是列表详情页面，C页面是操作改变B页面的一些东西，进行提交类似的操作。A页面进入B页面，应该根据不同的列表item显示不一样的详情，从B进入C，也应该根据item的标识比如ID展示不一样的内容，...
解决vue3 路由切换后，页面不显示内容，刷新后正常显示（路由切换白屏的问题）
热门推荐
weixin_43185419的博客
06-13 1万+
正常使用时切换路由都可以正常地切换页面，但是页面长时间无操作就会浮现该问题。使用导航切换路由，路由可以正常跳转，地址栏有变化，但页面不显示。在router-view 中给路由添加key标识。2、切换的各级页面均有根标签节点包裹。
vue+elementui tab切换丢失参数
weixin_48271592的博客
06-30 3411
vue+elementui列表跳详情后，点其他菜单进行tab切换丢失详情页参数
vue3路由切换，页面空白无内容
期待变成大神的博客
12-06 510
vue3路由切换，页面白页无内容
VUE3 keep-alive页面切换报错：parentComponent.ctx.deactivate is not a function
Ms_Wqh的博客
08-02 1499
VUE3 keep-alive页面切换报错：parentComponent.ctx.deactivate is not a function
Vue3后台管理点击导航页面空白无内容
SqlloveSyn的博客
11-24 997
图片内容只是为了方便大家理解才这样写的，原内容有很多，只是为了方便我进行了删减，但最终所以内容都要包在一个div内。当时以为是哪里写错了，就开始找，但是找了一圈后发现没有问题，又以为是模板的问题。后来发现了问题所在。如果想要探索其中的缘由可以进行搜索，这也问题的话也算是一个小坑吧，我可是记住了，各位也要知道这个坑哦。更改过后就好了，你的页面内容要统一包裹在一个div里面，要不然就会导致出现问题。在切换页面时出现了问题，页面切换了，但是页面呈现出一片空白，写好的东西都没有了。，不然会出现页面不加载的问题。
vue页面切换
最新发布
03-19
### Vue 页面切换的实现方式与路由导航 在 Vue.js 中，页面切换的核心依赖于 `Vue Router` 的使用。以下是关于 Vue 页面切换的具体方法及其相关技术细节： #### 1. 使用 `<router-link>` 进行页面跳转 通过定义路由实例和配置路由组件，在模板中利用 `<router-link>` 可以轻松实现页面之间的导航[^1]。 ```html <router-link to="/about">About</router-link> ``` 上述代码片段展示了如何创建一个链接到 `/about` 路径的按钮。点击该链接会触发路由变化并加载对应的组件。 #### 2. 动态路由参数传递 除了基本的路径匹配外，还可以通过动态路由参数来增强灵活性。例如，访问某个用户的详情页可以通过以下方式进行设置： ```javascript const routes = [ { path: '/user/:id', component: User } ]; ``` 当用户访问 `/user/123` 时，`:id` 将被解析为实际传入的值 (即 `"123"`)，从而允许开发者基于此构建更复杂的逻辑。 #### 3. Vuex 驱动下的复杂状态管理场景 对于一些需要全局共享的状态或者较为复杂的业务需求（比如首页导航栏根据某些条件改变显示内容），可以借助 Vuex 来集中管理和分发这些信息[^2]。 具体来说，可以在 store 文件夹下新建 action 和 mutation 方法用于更新当前激活菜单项等相关属性；随后绑定至视图层以便实时反映最新改动情况。 #### 4. 解决多次刷新丢失数据问题——Keep Alive 缓存机制 为了避免频繁销毁重建带来的性能损耗以及可能引发的数据重置现象，推荐采用 keep-alive 方向保存特定组件实例在整个生命周期内的状态不变[^3]^。 下面是一个简单的例子展示如何结合 meta 属性判断是否开启缓存功能： ```vue <template> <!-- 判断是否有keepAlive --> <router-view v-slot="{ Component }" v-if="$route.meta.keepAlive"> <keep-alive> <component :is="Component"/> </keep-alive> </router-view> <router-view v-else></router-view> </template> <script> export default { } </script> ``` 这里的关键在于 `$route.meta.keepAlive`, 它决定了某条记录是否会进入保留队列之中。 #### 5. 多标签页支持扩展方案 如果项目中有类似浏览器多窗口的需求，则可进一步探索自定义 tab 控制器的设计思路[^4]. 这通常涉及到维护一个数组用来存储各个子选项卡的信息，并且每当新增加一个新的目标地址时候就追加进去；与此同时还需要注意移除操作后的重新排列顺序等问题. ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值