如何在 Vue.js 3 设置中获取查询参数？

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 中的查询值？ 这个Answer 仍然让我感到困惑，因为没有使用组合 API 并且不在 vuejs 3 中

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);
}

Answer 2

您可以尝试另一种设置，通过 url 发送 propname { path: '/search/:propname', name: 'Search', component: SearchPage, props: true }, 在搜索页面上，在 created() 上你可以得到它 this.$route.params.propname