Question

我在从组件内部获取URL查询字符串时遇到问题。我正在尝试实现此https://router.vuejs.org/guide/essentials/passing-props.html#function-mode，以便可以将查询作为道具传递。我没有太多使用查询字符串，而且我倾向于使用params，但是在这种情况下我需要查询字符串。我遇到的问题是mounted()似乎无权访问该查询。

以下是我无法正常工作的基本示例：

URL = http://localhost:8080/?q=This%20is%20my%20query

Router.js

{
    path: '/',
    component: () => import('./App.vue'),
    props: (route) => ({ query: route.query.q })
}

App.vue（节选）

<template>
    <div id="app">
        1.{{ $route.query }}
        2.{{ query }}
        <searchResults class="results"/>
    </div>
</template>

props: ['query'],
mounted () {
    console.log(this.query)
    console.log(this.$route.query)
},

在上面的代码中，访问相关URL时发生以下情况：

console.log(this.query) = undefined

console.log(this.$route.query) = undefined

在模板中，输出以下内容：

1.{}
2.

我该怎么做才能正确获取查询作为道具？

VueJs-将查询字符串中的查询作为prop传递

0 个答案: