vue 3组合api路由查询为空答案

【问题标题】：vue 3 composition api route query is emptyvue 3组合api路由查询为空
【发布时间】：2021-09-02 22:10:31
【问题描述】：

这是我的 search.vue 组件：

 setup() {
    const router = useRouter();
    const route = useRoute();
    const searchQuery = ref("");

    const search = debounce((query) => {
      router.push({
        name: "Home",
        query: {
          ...route.query,
          search: query,
        },
      });
    }, 1000);

    watch(
      () => searchQuery.value,
      (value) => search(value)
    );

    nextTick(() => {
      console.log(route.query);
    });

    if (route.query.search) {
      searchQuery.value = route.query.search;
    }

    return {
      searchQuery,
    };
  },

问题是route.query 对象总是空的。但我可以在其他组件中轻松访问route.query，没有问题。

这是我的网址：

http://localhost:8080/?search=apple

【问题讨论】：

你每次都用另一个查询变量覆盖它。假设它只包含search 键。
searchQuery 的用途是什么？已经有 route.query 了。您可以使用 onBeforeRouteUpdate 对更改做出反应。
@EstusFlask 我有一个搜索输入，我该如何处理？

标签： javascript vue.js vue-router vuejs3

【解决方案1】：

我无法访问布局组件中的查询参数。

【讨论】：