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

NidhoogJX

已于 2022-12-14 17:22:28 修改

阅读量1.8k

点赞数 4

分类专栏： VUE学习文章标签： vue.js javascript 前端

于 2022-12-14 17:19:16 首次发布

本文链接：https://blog.csdn.net/NidhoogJX/article/details/128318914

版权

VUE学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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监听即可,记录下来