如何在Vue.js 3的setup中获取查询参数？

Question

我希望制作一个搜索页面，点击按钮后会重定向到另一个页面。该页面应该如下所示：

http://localhost:8080/search?q=foo

我的路由器index.js看起来像这样

const routers = [
  {
    path: '/search',
    name: 'Search',
    component: SearchPage,
    props: route => ( { query: route.query.q } )
  }
]

问题是如何在Vue.js 3中获取目标页面SearchPage的查询值？这篇答案仍然让我感到困惑，因为它没有使用组合API且不属于Vue.js 3。

- Nanda Z

Answer 1

使用useRoute

你不需要将查询作为属性发送。最好使用useRoute，因为它更简单，并且可以从任何组件访问，而不仅仅是页面视图组件。

import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    console.log(route.query);
  }
}

使用一个属性 (不推荐)

首先更改路由映射，使得query映射到query对象：

props: route => ({ query: route.query })

在目标组件的SearchPage中，创建一个query属性，该属性将接收来自路由器的query对象。

props: ['query']

通过props参数在setup中访问它：

props: ['query'],
setup(props) {
  console.log(props.query.q);
  console.log(props.query.status);
}

- Dan

Answer 2

另一种可尝试的设置，通过URL发送propname属性 { path: '/search/:propname', name: 'Search', component: SearchPage, props: true }, 在搜索页面上，在created()生命周期中你可以获取它： this.$route.params.propname

- talm0r

---

抱歉，但那不是我想要的。我需要使用查询参数模式，而不是slug。 - Nanda Z

我认为这可能会有用的一天，只是今天不是。 - Herbert Van-Vliet

Answer 3

针对Vue Router 4 :: 组合式API :: Vue3

路由链接附加参数

 <router-link
    style="width: 100%"
    class="btn btn-success btn-block edit"
    :to="{ name: 'editUser',params: {id: user.id}}">
       <i class="fa-solid fa-user-gear"></i>
 </router-link>

在一个页面中，你收到了：

<script>

export default {
  props: ["id"],
  setup(props, context) {
        console.log(props.id);
  },
};
</script>

在你的 app.js 文件中

import { createApp } from 'vue';
...
...
const app = createApp(root);

app.use(router);

router.isReady().then(() => {
    app.mount('#app');
})

- Saugat