VueJs 获取 URL 查询

我正在用 vuejs 开发一个网站，现在我遇到了一个问题，我需要从一个像这样的 URL 获取 URL 查询(页面) ，但是 websitename.com/user/?page=1给了我一个错误(未捕获的类型错误: 无法读取属性“页面”的未定义)

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

附言: 我可以设置查询页面使用

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

我可以得到 URL 的普通参数，比如

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

但是我不能得到任何查询参数。

227134 次浏览
小开

Current route properties are present in this.$route, this.$router is the instance of router object which gives the configuration of the router. You can get the current route query using this.$route.query

小开
最佳答案

I think you can simple call like this, this will give you result value.

this.$route.query.page

Look image $route is object in Vue Instance and you can access with this keyword and next you can select object properties like above one :

enter image description here

Have a look Vue-router document for selecting queries value :

Vue Router Object

小开

In my case I console.log(this.$route) and returned the fullPath:

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


console.js: /solicitud/MX/666
小开

You can also get them with pure javascript.

For example:

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

For this url: websitename.com/user/?page=1, it would return a value of 1

小开

For the url either having query param or as route path. use: this.$router.currentRoute._value. It has all the properties of the url that you may want

This is have all the routes like for url: https://localhost:8880/2?isExternal=true

this.$router.currentRoute._value.params.studentId


note: studentId is the route param name.
output: will return 2

This is have all the query params like: https://localhost:8880/2?isExternal=true

this.$router.currentRoute._value.query.isExternal


output: will return value of isExternal, that is: true

enter image description here


提交答案