如何在 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']

并通过

setup

参数在

props

中访问它：

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

Answer 3

适用于 Vue Router 4 :: Compositon 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');
})

Answer 4

访问查询需要从currentRoute中获取查询。 currentRoute 是 Ref 类型，因此必须从 value 属性获取查询。

<script setup lang="ts">

import { useRouter } from 'vue-router'; 
const router = useRouter();
console.log(router.currentRoute.value.query.ProjectId)

</script>