VueJs get url query

Question

I'm developing a website with vuejs and at this moment I'm in trouble, I need to get the url query (page) from a url like this websitename.com/user/?page=1 but the this.$router.query.page gives me an error (Uncaught TypeError: Cannot read property 'page' of undefined)

Does someone know something about this problem and can help me?

PS: I can set the query page using

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

and I can get the url normal params like the

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

but I can't get any query parameter.

Answer 1

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 :

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

Vue Router Object

Answer 2

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

Answer 3

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

Answer 4

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