Vue3：页面A搜索后跳转到页面B，然后从页面B退回页面A重新搜索，但是得到的页面B得刷新一下才会显示正确的数据

最新推荐文章于 2024-06-14 15:42:03 发布
最新推荐文章于 2024-06-14 15:42:03 发布
阅读量597 收藏
点赞数
分类专栏： vue 文章标签： vue3 数据渲染不及时
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/junehhh/article/details/132169863
版权
文章讨论了Vue3中，从页面A搜索跳转到B后返回时数据不更新的问题，原因在于数据声明不在合适的生命周期阶段。解决方案是在setup函数中处理数据，利用Vue3的setup语法糖避免生命周期函数使用不当引发的错误。
摘要由CSDN通过智能技术生成

问题

Vue3： 从页面A进行搜索后跳转到页面B，然后从页面B退回页面A重新搜索，但是得到的页面B得刷新一下才会显示正确的数据。

  • 读取数据的代码格式大致如下（代码做了一些删减）：
    在这里插入图片描述

解决

  • 会出现上述情况，是因为渲染数据这个步骤没有出现在Vue实例的生命周期中合适的阶段，读取数据并渲染数据的步骤应该放在组件实例已经完全创建后。而上述代码把数据的声明放在了setup函数外，vue3的setup函数相当于vue2中的 beforeCreate 和created函数的结合，因此应该把数据的声明放在setup函数中。
    在这里插入图片描述

  • 下图是vue2和vue3生命周期钩子函数的一个对比（图源网络）：
    在这里插入图片描述

  • 对于Vue3来说，可以直接使用语法糖，可以避免一些因生命周期函数使用不当而造成的错误，在script标签中加个setup即可

<script setup>
</script>
十八只兔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 同一个页面路由无反应_Vue同一路由跳转页面不刷新解决方案及注意事项
weixin_28796657的博客
02-11 5577
默认情况跳转至同一个路由地址(path相同，即使params或者query不同也算同一个)的话，只是浏览器url变了，其它是不会发生任何变化，这就是网友常说的“同一页面跳转，路由变了但是页面不刷新”。我们可以写两个测试页面// goNext.vue跳转至自身跳转至goBackexport default {name: 'goNext',mounted() {console.log('组件生命周期 ...
vue 页面跳转404_Vue 项目一些常见问题的解决方案
weixin_39875167的博客
11-20 8179
本文已获得原作者的独家授权，有想转载的朋友们可以在后台联系我申请开白哦！PS：欢迎掘友们像我投稿哦，被采用的文章还可以送你掘金精美周边！有一些问题不限于 Vue，还适应于其他类型的 SPA 项目。1. 页面权限控制和登陆验证页面权限控制页面权限控制是什么意思呢？就是一个网站有不同的角色，比如管理员和普通用户，要求不同的角色能访问的页面是不一样的。如果一个页面，有角色越权访问，这时就得做出...
vue搜索页面.zip
04-14
页面框架采用vant的vue搜索功能页面
vue3项目 页面跳转之后，退回到原页面点击位置
最新发布
amber_1210的博客
06-14 631
获取多条数据列表，点击其中某条数据跳转到详情页面。再从详情页面退回到数据列表页面，并回到点击跳转处。1、在app.vue页面路由出口位置使用keep-alive内置组件。注意：include里面写的是组件的名称，而并非是组件的路由名称。2、在list.vue页面中定义跳转前的scrollTop值。1、在app.vue页面采用keep-alive内置组件。2、在跳转之前获取到点击位置处的高度。3、在页面加载时，拿到高度赋值即可。获取点击处的位置高度。
Vue实现搜索页面
STRainie的博客
07-22 3175
实现功能如下图所示：（因为被腰斩，样式未调整） 直接上代码： pages/Search.vue //搜索页 <template> <div class="search-page"> <page-header></page-header> <keep-alive> //keep-alive包裹需更新组件 <search-content></se
vue后台管理系统A页面输入表单数据点击下一页进入到B页面，在B页面点击返回上一页面，A页面表单数据清空的问题？
Mygongzi的博客
12-08 1518
A页面输入表单数据点击下一页进入到B页面，在B页面点击返回上一页面，A页面表单数据清空的问题？
vue 从A页面跳到B页面添加数据，从B页面返回上一页（A页面）时实时刷新A页面的数据（返回上一页刷新数据）
leng0920的博客
03-22 1602
vue 从A页面跳到B页面添加数据，从B页面返回上一页（A页面）时实时刷新A页面的数据（返回上一页刷新数据）
解决vue页面刷新或者后退参数丢失的问题
11-29
在Vue.js应用中，用户交互过程中常常涉及到页面的跳转和刷新，这可能导致用户在页面之间切换时丢失一些关键的数据，比如筛选条件、分页信息等。这种情况在面向企业级应用（toB）的列表数据筛选查询场景中尤为常见。...
vue实现前进刷新后退不刷新效果
08-28
vue实现前进刷新后退不刷新效果 在 Vue 框架中，如何实现前进刷新、后退不刷新的效果是一个常见的问题。这个效果的实现可以让用户在浏览应用程序时，加载过的界面能够缓存起来，不需要重新加载，而关闭的界面能够被...
vue单页面切换，返回到上个页面的时候要进行刷新
小柠檬爱编程
09-10 1774
created():创建vue对象时，html渲染之前触发；也就是说created()只会触发一次。 activated():在vue对象存活的状态下，进入这个页面就会触发activated()函数，可以用来初始化页面数据（刷新页面） deactivated():离开组件时执行； activated()和deactivated()只有在keepalive:true的情况下才会生效 //调用这个函数可以实现刷新,(位置不要写错,与methods,mounted()是同级) activated () {
vue 实现搜索的结果页面支持全选与取消全选功能
10-17
主要介绍了vue 实现搜索的结果页面支持全选与取消全选功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vue 实现A 页面跳转到B页面 ，B页面返回的A 页面时 ，保留A页面的数据
m0_48557659的博客
11-03 2304
需求描述 ：A页面为搜索页，B页面为A页面的内容详情页 ，当我在A页面搜索完成，跳转到B页面，当从B页面返回A页面时，A页面所有数据不变`
VUE A页面跳转到B页面带参数，且每次点击跳转，数据刷新
笨小孩
05-25 4084
项目遇到一个业务需求是，A页面展示消息列表，然后点击列表中的消息，跳转到B页面，B页面需要展示A页面中对应消息的内容。
vue 在IOS移动端中 windon.open 等跳转外部链接后，返回不触发vue生命周期、mounted等相关事件-解决方法
少年感
08-24 1277
做了一个列表的h5页面，通过点击列表跳转到外部链接，然后返回是回到原来页面状态，类似缓存。发现在ios端返回后，vue 的mounted() 、create()、路由监听等方法都不会执行。在安卓和pc 端都能正常调用。
Vue搜索功能
qq_34227291的博客
04-08 1547
Vue搜索功能 知识点：v-model数据双向绑定，绑定对象是input 效果图： HTML <template> <div id="search"> <header> <div class="header_input"> <!-- 绑定search并在data定义值为空 --> <input type=...
【VUE】Vue2菜单搜索并跳转指定页面
SZnAl的博客
03-28 2781
有时候后台管理系统复杂的菜单结构与更深的层级使用户无法快速找到自己所需的页面，如何提高后台管理系统的便捷度并且使系统与用户的交互更加灵活成为了项目在基础功能之外更重要的追求。菜单目录支持搜索并且可直接跳转便可以达到以上诉求。
vue电商项目(三)——开发search页面
a_bowl_rice的博客
12-23 1019
search组件部分
使用VueRouter的state来实现页面回退功能
while1170的博客
04-14 535
使用VueRouter的state来实现页面回退功能。1.我们首次打开页面是没有历史记录的，所以不用回退。3.给回退按钮添加点击事件，根据历史回退到上一页。2.当切换页面后，就生成了历史记录。回退，若参数是正数则代表前进。
vue3 页面A轮询echarts生成图表 跳转到页面B后 找不到DOM元素
06-13
您好，针对您的问题，可能是由于页面A没有正确地销毁echarts实例导致的。在Vue3中，可以通过ref来获取组件的DOM元素，并在组件销毁时手动销毁echarts实例以避免该问题的发生。 在页面A的组件中，可以通过ref获取echarts实例，然后在组件销毁前手动销毁实例，示例如下： ```vue <template> <div ref="chartContainer"></div> </template> <script> import * as echarts from 'echarts'; export default { mounted() { this.chart = echarts.init(this.$refs.chartContainer); // 绘制图表 this.chart.setOption({...}); // 启动轮询 this.interval = setInterval(() => { // 更新图表数据 this.chart.setOption({...}); }, 1000); }, beforeUnmount() { clearInterval(this.interval); // 手动销毁echarts实例 this.chart.dispose(); } } </script> ``` 在页面B跳转到时，由于Vue3的组件是虚拟DOM，会在销毁前调用beforeUnmount钩子函数，因此可以在这里手动销毁echarts实例，示例如下： ```vue <template> <div> <!-- 页面B的内容 --> </div> </template> <script> export default { beforeUnmount() { // 手动销毁echarts实例 this.$refs.chartContainer.chart.dispose(); } } </script> ``` 这样，在页面B跳转到时，就能正确地销毁echarts实例，避免找不到DOM元素的问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值