VueJs 获取 url 查询答案

【问题标题】：VueJs get url queryVueJs 获取 url 查询
【发布时间】：2017-07-07 16:35:36
【问题描述】：

我正在使用 vuejs 开发一个网站，此时我遇到了一个问题，我需要从这个 websitename.com/user/?page=1 这样的 URL 获取 URL 查询（页面），但是 @ 987654321@ 给我一个错误（Uncaught TypeError: Cannot read property 'page' of undefined）

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

PS：我可以设置查询页面使用

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

我可以得到像

这样的 URL 普通参数

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

但我无法获取任何查询参数。

【问题讨论】：

标签： vuejs2 vue-component vue.js vue-router

【解决方案1】：

我认为你可以像这样简单地调用，这会给你结果值。

this.$route.query.page

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

查看用于选择查询值的 Vue-router 文档：

Vue Router Object

【讨论】：

您的答案是正确的，但是在我将调用路由器查询的事件处理程序更改为“已创建”后，console.log 也可以工作

【解决方案2】：

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

例如：

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

对于这个 url：websitename.com/user/?page=1，它会返回值 1

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

在我的情况下，我 console.log(this.$route) 并返回了完整路径：

console.js:
fullPath: "/solicitud/MX/666",
params: {market: "MX", id: "666"},
path: "/solicitud/MX/666"

console.js: /solicitud/MX/666

【讨论】：