Question

VueJs 获取 url 查询

2017-02-18

264904

vuejs2 vue-component vue.js vue-router

我正在使用 vuejs 开发一个网站，此时我遇到了一个问题，我需要从类似 websitename.com/user/?page=1 的 URL 获取 URL 查询（页面），但是 this.$router.query.page 给了我一个错误（Uncaught TypeError：无法读取未定义的属性“page”）

有人知道这个问题并可以帮助我吗？

PS：我可以使用

this.$router.push({name: 'userIndex', query: { page: '123' } });

设置查询页面，并且我可以获得像

userID -> (websitename.com/user/:userId | websitename.com/user/1)

这样的 URL 正常参数，但我无法获取任何查询参数。

Answer 1

我认为您可以像这样简单地调用，这将为您提供结果值。

this.$route.query.page

查看图像 $route 是 Vue 实例中的对象，您可以使用此关键字进行访问，接下来您可以选择像上面这样的对象属性：

查看 Vue-router 文档以选择查询值：

Vue Router Object

Answer 2

您也可以使用纯 javascript 获取它们。

例如：

new URL(location.href).searchParams.get('page')

对于此 url： websitename.com/user/?page=1 ，它将返回值 1

Answer 3

当前路由属性存在于 this.$route 中， this.$router 是路由器对象的实例，它提供路由器的配置。您可以使用 this.$route.query 获取当前路由查询。