前端 - Vue3中监听route.query.index在组件加载后为何是undefined？

Question

vue3中，我想监听route.query.index，通过router.push添加query参数后，第一次进入组件后，获取到的route.query.index是undefined。

本想着应该是因为router.push是异步，导致刚加载组件后还没有变化，但是通过watchEffect监听的话，第一次的变化并没有监听到，第二次router.push时才会监听到变化，

watchEffect(() => {
  console.log(route.query.index)
  query.value = route.query.index;
});

之后想通过.then来确保完成后再跳转到组件，但是获取到的依旧是undefined

router.push().then(() => {
    nextTick()
})

想请问下这个该如何解决

Answer 1

不是很明白你说的第一次变化是指什么，是进入页面是路径上就带着的参数吗？

另外，这类数据最好是直接用 computed 处理，而不是监听后再赋值。

const queryIndex = computed(() => route.query.index)

Answer 2

在 Vue 3 中，如果你使用 Vue Router 4，route 对象是一个响应式对象，但通常你不应该直接引用它，而是通过 useRoute hook 来获取它。对于你的问题，有几种可能的原因和解决方案：

1. 确保组件已经渲染并响应了路由参数：
   watchEffect 通常用于监听响应式引用和响应式对象的改变。但是，如果你试图在组件的 setup 函数或生命周期钩子（如 onMounted）中立即访问 route.query.index，可能组件还未完全响应这些路由参数。

2. 使用 useRoute hook：
   使用 useRoute hook 代替直接访问 route 对象。

   import { useRoute } from 'vue-router';
   
   export default {
     setup() {
       const route = useRoute();
   
       // 使用 watchEffect 或其他监听机制
       watchEffect(() => {
         console.log(route.query.index);
         // ...
       });
   
       // 或者在 onMounted 生命周期钩子中访问
       onMounted(() => {
         console.log(route.query.index);
       });
   
       // ...
     },
   };

3. 使用 onBeforeRouteUpdate 守卫：
   如果你需要监听路由更新，并且确保在路由更新后访问查询参数，可以使用路由守卫 onBeforeRouteUpdate。但是，对于组件的初始渲染，你可能还需要在 onMounted 中访问查询参数。

4. 确保 router.push 正确使用了 query：
   确保你使用 router.push 时正确地传递了 query 参数。

   router.push({
     path: '/your-path',
     query: { index: 'some-value' },
   });

5. 不要使用 .then 和 nextTick：
   在 router.push 的 .then 回调中使用 nextTick 是不必要的，因为 .then 回调是在导航完成后触发的，此时 DOM 已经更新。但是，对于 Vue 组件的响应式数据，你通常不需要显式地调用 nextTick，因为 Vue 的响应系统会自动处理这些更新。
6. 检查路由配置：
   确保你的路由配置没有错误，并且确实允许你通过查询参数来访问组件。
7. 检查 Vue Router 版本：
   确保你使用的 Vue Router 版本与 Vue 3 兼容。

如果上述方法都不能解决你的问题，请检查你的代码是否有其他逻辑错误或遗漏，或者考虑创建一个简单的示例来逐步调试问题。