如何在 setup() Vue 3 中访问 url GET 参数？

Question

这是我的 URL：http://localhost:8888/static/?foo=true Vue 3 应用程序通过它工作。

在 setup() 中我想获取 foo 参数。

这是我的代码：

import { useRoute } from 'vue-router';
import { defineComponent, reactive, ref, Ref, watch, createApp, onMounted} from 'vue';

export default defineComponent({
  name: 'App',
  
  setup() {
    onMounted(() => {
        const route = useRoute();
        console.log(route);
        console.log(route.params.foo);
        console.log(route.query.foo);
    });
  },
})

这就是我得到的：

谁能告诉我怎么做？

Answer 1

我认为根本问题是在 App.vue 组件的 onMounted 挂钩中触发它。那个时候路由实例可能还没有填充。你可以通过 console.log-ing onUpdated 挂钩中的 route.query 来测试它。解决方法可能是这样的：

const unwatch = watch(
  () => route.query,
  (newQuery) => {
    console.log(newQuery.foo);
    unwatch();
  }
);

基本上，您会为 route.query 分配一个观察者，并且在第一次更新后 - 观察者将被销毁。

如何在 setup() Vue 3 中访问 url GET 参数？

How to acess url GET parameter in setup() Vue 3?

javascript

typescript

vue.js

vue-router

vuejs3