Level 51
You could try using nextTick()
mounted() {
Vue.nextTick()
.then(function () {
console.log(this.$route.query);
})
}
Nov 5, 2018
12
Level 22
this.$route.query is empty on first load
I have this url above on first load
http://domain.test/?access_token=value&refresh_token=value&platform=Android&reseller=value&reseller_account=value
and on my vuejs file
mounted() {
console.log(this.$route.query);
},
its giving me null
but
beforeRouteEnter (to, from, next) {
let data = {
accessToken: to.query.access_token,
refreshToken: to.query.refresh_token,
reseller: to.query.reseller,
resellerAccount: to.query.reseller_account
};
}
does give me values though..
I want to get the value on first load
Level 22
@D9705996 - it says
"Cannot read property '$route' of undefined"
on
Vue.nextTick().then(function () {
console.log(this.$route.query);
});
any other ideas?
Level 51
Use an arrow function to avoid binding this in nextTick then function
Vue.nextTick().then( () => { console.log(this.$route.query) });
I think syntax above is correct bug check out
https://www.sitepoint.com/es6-arrow-functions-new-fat-concise-syntax-javascript/
Level 22
I just noticed something really disturbing and bad about Vue regarding this one.
I have a parent and a child component and my URL looks like this.
http://domain.test/users?page=2&per_page=15
on my parent component
mounted() {
console.log(this.$route.query); // It has values. { page: 2, per_page; 15 }
}
on my child component
<< THIS HAS VALUES YESTERDAY >>
mounted() {
console.log(this.$route.query); // This is undefined
Vue.nextTick().then(() => {
console.log(this.$route.query.page); // This is STILL undefined
});
}
<< THIS HAS VALUES YESTERDAY >>
The weird thing about this is that the child component has values yesterday and now I just noticed it's undefined while I was checking for UI changes in the parent component. I didn't touch the child component.
Can anyone confirm if they have this behavior on their parent and child components?
Level 47
this.$nextTick(() => {
console.log(this.$route.query)
})
but , normally any query in routes should be passed before data retrieving unless you use beforeEnter.
check your router-link or path in your routes file
Level 22
Yes, I do have beforeRouteEnter on my parent component.
beforeRouteEnter(to, from, next) {
// Values are { page: 2, per_page: 15 }
console.log("BeforeRouteEnter: ", to.query);
if (to.query.per_page == null) {
next(vm => vm.getData({
page: to.query.page,
per_page: 15
}));
} else {
next(vm => vm.getData({
page: to.query.page,
per_page: to.query.per_page
}));
}
},
Level 22
Isn't the parent and chid component basically accessing THE SAME instance of this.$route because this is global?
so the parent and child should output the same result of this.$route
Level 22
I just noticed something else too, on my child component, this is the value of the this.$route,fullPath
users?page=3&per_page=15&name=&display_name=&order_by=desc
but the this.$route.query only contains { display_name: "", name: "" }
page, per_page, and order_by is not in the query.
Level 22
I found the issue, it was my mistake. looks like I was deleting the properties of it on another component. it took me quite a while to find it because there are too many component files.
Level 1
This may have been a mistake, but its also a real problem if you need access to .query early in your app load
The solution in my case was:
mounted() {
this.$router.onReady(() => {
console.log(this.$route.query);
});
}
The callback from nextTick() was still empty
1 like
Level 22
@slothentic thanks for this, I might use this in the near future again.
Please or to participate in this conversation.