VUE项目中遇到的问题和解决办法 (1) route.query刷新后丢失

背景:今天在写项目时需要用到,route.query获取参数,本来这是一个很简单的问题,但是我遇到了参数丢失的问题
环境: vue3, vue-router ,macos
正常写法:`

import { useStore } from 'vuex';
import { useRoute } from 'vue-router';
export default {name: 'App',components: {},setup(){console.log('setup：' + new Date().getTime())const store = useStore();const route = useRoute();console.log('watch  获取query',route.query)}

运行项目,访问本地项目地址:http://localhost:8081/customer/?appid=30001&uid=10
输出结果:

没毛病,然后我刷新下浏览器,结果控制台打印结果为{} 空对象,

我就很纳闷啊,没道理啊,我记得文档里不是说query获取的是地址栏后面的参数吗?应该是不会丢失的,获取param才会丢失,我已经记不太清了,但是又不想查文档,然后我就想会不会没消失,而是有延迟,所以我加了个watch 监听query的变化打印到控制台:

import { watch } from 'vue';
import { useStore } from 'vuex';
import { useRoute } from 'vue-router';
export default {name: 'App',components: {},setup(){console.log('setup：' + new Date().getTime())const store = useStore();const route = useRoute();watch(()=>route.query,()=> {console.log('watch：' + new Date().getTime())console.log('watch  获取query',route.query)})

果然,这次再刷新结果就有了,然后因为我打印了时间戳,可以看到进入setup 和watch 监听到query变化有100多ms的延迟,

![运行结果](https://img-blog.csdnimg.cn/b4fdcaa23ab943179ecdcad65effc16e.png#pic_center
我猜vue-router 和setup 并不是一起加载的,不过我懒得去验证了,去官方翻翻文档或者issue应该能找到这个问题,不管黑猫白猫,抓到耗子就是好猫,加个watch监听即可,记录下来

VUE项目中遇到的问题和解决办法 (1) route.query刷新后丢失相关推荐

在Vue项目中使用LayUI教程且解决laydate无效的问题
在Vue项目中使用LayUI教程且解决laydate无效的问题 1,安装LayUI开发包 2,导入LayUI开发包 3,在挂载函数mounted中加载LayUI组件 4,解决加载LayUI日期组件出现 ...
项目中遇到的问题及解决办法
项目中遇到的问题及解决办法参考文章: (1)项目中遇到的问题及解决办法 (2)https://www.cnblogs.com/xulibing/p/5940741.html 备忘一下.
VUE项目中使用this.$forceUpdate()；解决页面v-for中修改item属性值后页面v-if不改变的问题
VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题参考文章: (1)VUE项目中使用this.$forceUpdate();解决 ...
创建VUE项目时遇到的困难以及解决办法记录
问题1:vue-cli4版本脚手架运行时element-ui报错 Warning in ./src/plugins/element.js "export 'default' (importe ...
vue项目中的一些报错解决方法
1.mixed spaces and tabs no-mixed-spaces-and-tabs 禁止使用空格和tab混合缩进:大多数代码约定要求使用空格或 tab 进行缩进.因此,一行代码同时混有 ...
阿里云SDK和SpringBoot maven项目中jar包冲突的解决办法
stringboot项目在引用阿里云短信sdk时,出现jar包冲突问题,项目可以正常启动,但是启动会报如图错误解决办法,在maven中查找到冲突的jar,并用exclusions隔离冲突的jar & ...
在IDEA中，项目中出现红色波浪线解决办法
今天把一个maven项目导入到idea中,项目能够正常的运行,但是代码有很多的红色波浪线,对于一个有强迫症的人来说,这样显示肯定不行的,看着很难受,经过不断摸索,最终找到了一个不错的解决方法. 将红色 ...
最近项目中遇到的问题以及解决办法
这个是将iphone手机的数字默认颜色和下划线去掉 <meta name="format-detection" content="telephone = no&qu ...
vue项目中vue-scroller实现上拉加载和下拉刷新
vue目前是众所周知的流行框架大家都知道的,vue全家桶的成员是:vue-cli,vuex,vue-router,vue-axios(vue2.0).然后它的第三方插件也有很多,比如:vue-scro ...

VUE项目中遇到的问题和解决办法 (1) route.query刷新后丢失

VUE项目中遇到的问题和解决办法 (1) route.query刷新后丢失

VUE项目中遇到的问题和解决办法 (1) route.query刷新后丢失相关推荐

最新文章

热门文章