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

Question

我想使搜索页面后，我点击它的按钮将被重定向到另一个页面。这一页将是这样的

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

还有我的路由器索引。js看起来像这样

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

问题是如何在Vue中获取目标页面SearchPage中的查询值。JS3？这个答案仍然让我困惑，因为没有使用CompositionAPI，也没有在VueJS3中使用

Answer 1

您可以尝试的另一种设置是，通过url发送propname{path:'/search/：propname'，name:'search'，component:SearchPage，props:true}，，在SearchPage上，在created（）上，您可以接收它$路线params。propname

Answer 2

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

import { useRoute } from 'vue-router';

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

首先更改路由器映射，以便query映射到query对象：

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

在目标组件SearchPage中，创建一个查询道具，该道具将从路由器接收查询对象：

props: ['query']

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

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