javascript - 如何在 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 } )
  }
]

问题是我如何获取目标页面中的查询值 SearchPage ，在 Vue.js 3 中？
这个 Answer仍然让我感到困惑，因为没有使用组合 API 而不是在 vuejs 3 中

Answer 1

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

import { useRoute } from 'vue-router';

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

使用 Prop
首先更改路由器映射，以便 query映射到 query目的:

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

在目标组件中， SearchPage , 创建一个 query将收到 query 的 Prop 来自路由器的对象:

props: ['query']

并在 setup 中访问它通过 props争论:

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