[vuejs2] VueJs get url query

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.

This question is related to vuejs2 vue-component vue.js vue-router

The answer is


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


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


Examples related to vuejs2

How can I go back/route-back on vue-router? Change the default base url for axios How to change port number in vue-cli project How to solve 'Redirect has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header'? vuetify center items into v-flex Vuejs: Event on route change Vuex - Computed property "name" was assigned to but it has no setter Vuex - passing multiple parameters to mutation How to listen to the window scroll event in a VueJS component? How to acces external json file objects in vue.js app

Examples related to vue-component

Vue 'export default' vs 'new Vue' Vuex - Computed property "name" was assigned to but it has no setter How to add external JS scripts to VueJS Components How to listen for 'props' changes How can I set selected option selected in vue.js 2? How do I format currencies in a Vue component? [Vue warn]: Property or method is not defined on the instance but referenced during render VueJs get url query Vue.js - How to properly watch for nested data Vue template or render function not defined yet I am using neither?

Examples related to vue.js

How to fix 'Unchecked runtime.lastError: The message port closed before a response was received' chrome issue? Center content vertically on Vuetify Vue.js get selected option on @change Using Environment Variables with Vue.js did you register the component correctly? For recursive components, make sure to provide the "name" option Vue 'export default' vs 'new Vue' How can I go back/route-back on vue-router? Change the default base url for axios How to reference static assets within vue javascript How to change port number in vue-cli project

Examples related to vue-router

How can I go back/route-back on vue-router? Vuejs: Event on route change How to VueJS router-link active style How to add external JS scripts to VueJS Components VueJs get url query Do we have router.reload in vue-router? How to pass a value from Vue data to href? How to set URL query params in Vue with Vue-Router Vue-router redirect on page not found (404) Can vue-router open a link in a new tab?