VueJs get url query

Question

I'm developing a website with vuejs and at this moment I'm with a problem, 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.

Mandeep Gill · Accepted Answer · 2017-02-18 15:25:21Z

188

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

edited Feb 18, 2017 at 15:25

answered Feb 18, 2017 at 15:18

Mandeep Gill

4,9372 gold badges31 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Simão Lemos Over a year ago

your answer is right, but the console.log works also after i change the event handler where has de call to the router query to "created"

Brad Ahrens · Accepted Answer · 2019-11-18 19:02:44Z

30

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

answered Nov 18, 2019 at 19:02

Brad Ahrens

5,1846 gold badges39 silver badges55 bronze badges

Comments

Srinivas Damam · Accepted Answer · 2017-02-18 05:55:30Z

16

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

edited Feb 18, 2017 at 5:55

answered Feb 18, 2017 at 3:48

Srinivas Damam

3,0652 gold badges20 silver badges26 bronze badges

Comments

Jorge Epuñan · Accepted Answer · 2018-07-16 20:52:07Z

12

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

answered Jul 16, 2018 at 20:52

Jorge Epuñan

7607 silver badges10 bronze badges

Comments

KushalSeth · Accepted Answer · 2022-07-12 13:44:01Z

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

answered Jul 12, 2022 at 13:44

KushalSeth

5,0461 gold badge41 silver badges39 bronze badges

Collectives™ on Stack Overflow

VueJs get url query

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related