How can I get query parameters from a URL in Vue.js?
Javascriptvue.jsVue RouterUrl ParametersJavascript Problem Overview
How can I fetch query parameters in Vue.js?
E.g. http://somesite.com?test=yay
.
Can’t find a way to fetch or do I need to use pure JS or some library for this?
Javascript Solutions
Solution 1 - Javascript
According to the docs of route object, you have access to a $route
object from your components, which exposes what you need. In this case
//from your component
console.log(this.$route.query.test) // outputs 'yay'
Solution 2 - Javascript
Without vue-route, split the URL
var vm = new Vue({
....
created() {
let uri = window.location.href.split('?');
if(uri.length == 2) {
let vars = uri[1].split('&');
let getVars = {};
let tmp = '';
vars.forEach(function(v) {
tmp = v.split('=');
if(tmp.length == 2)
getVars[tmp[0]] = tmp[1];
});
console.log(getVars);
// do
}
},
updated() {
},
....
Another solution https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/search:
var vm = new Vue({
....
created() {
let uri = window.location.search.substring(1);
let params = new URLSearchParams(uri);
console.log(params.get("var_name"));
},
updated() {
},
....
Solution 3 - Javascript
Try this code
var vm = new Vue({
created() {
let urlParams = new URLSearchParams(window.location.search);
console.log(urlParams.has('yourParam')); // true
console.log(urlParams.get('yourParam')); // "MyParam"
},
});
Solution 4 - Javascript
More detailed answer to help the newbies of VueJS:
- First define your router object, select the mode you seem fit. You can declare your routes inside the routes list.
- Next you would want your main app to know router exists, so declare it inside the main app declaration.
- Lastly the
$route
instance holds all the information about the current route. The code will console log just the parameter passed in the url. (*Mounted is similar todocument.ready
, i.e. it's called as soon as the app is ready)
And the code itself:
<script src="https://unpkg.com/vue-router"></script>
var router = new VueRouter({
mode: 'history',
routes: []
});
var vm = new Vue({
router,
el: '#app',
mounted: function() {
q = this.$route.query.q
console.log(q)
},
});
Solution 5 - Javascript
Another way (assuming you are using vue-router
), is to map the query param to a prop in your router. Then you can treat it like any other prop in your component code. For example, add this route;
{
path: '/mypage',
name: 'mypage',
component: MyPage,
props: (route) => ({ foo: route.query.foo }),
}
Then in your component you can add the prop as normal;
props: {
foo: {
type: String,
default: null,
}
},
Then it will be available as this.foo
and you can do anything you want with it (like set a watcher, etc.)
Solution 6 - Javascript
As of this date, the correct way according to the dynamic routing docs is:
this.$route.params.yourProperty
instead of
this.$route.query.yourProperty
Solution 7 - Javascript
Vue 3 Composition API
(as far as now 2021, vue-router 4)
import {useRoute} from "vue-router";
//can use only in setup()
useRoute().query.test
or
//somewhere in your src files
import router from "~/router";
//can use everywhere
router.currentRoute.value.query.test
or
import {useRouter} from "vue-router";
//can use only in setup()
useRouter().currentRoute.value.query.test
Solution 8 - Javascript
If your url looks something like this:
somesite.com/something/123
Where '123' is a parameter named 'id' (url like /something/:id), try with:
this.$route.params.id
Solution 9 - Javascript
> You can use vue-router.I have an example below:
url: www.example.com?name=john&lastName=doe
new Vue({
el: "#app",
data: {
name: '',
lastName: '',
},
beforeRouteEnter(to, from, next) {
if(Object.keys(to.query).length !== 0) { //if the url has query (?query)
next(vm => {
vm.name = to.query.name;
vm.lastName = to.query.lastName;
});
}
next();
}
})
Note: In beforeRouteEnter
function we cannot access the component's properties like: this.propertyName
.That's why i have pass the vm
to next
function.It is the recommented way to access the vue instance.Actually the vm
it stands for vue instance
Solution 10 - Javascript
Here is how to do it if you are using vue-router
with vue3 composition api
import { useRoute } from 'vue-router'
export default {
setup() {
const route = useRoute()
console.log(route.query)
}
}
Solution 11 - Javascript
Example url: http://localhost:9528/#/course/outline/1439990638887137282
Below codes output: 1439990638887137282
this.courseId = this.$route.params.id
console.log('courseId', this.courseId)
Solution 12 - Javascript
one thing to keep in mind if you are using Hash mode then don't use this.$route.params.name only use url search param
Solution 13 - Javascript
You can get By Using this function.
console.log(this.$route.query.test)