0

I seem to have an issue with Vue, I'm running it vie Vue UI which is handling the compiling. I'm trying to solve an issue I have VueJs - Passing query in query string as prop but I have noticed the below and I am not sure why.

URL = http://localhost:8080/?q=This%20is%20my%20query

mounted () {
    console.log(this.$route.query.q)
    console.log(this.$route.query)
}

Given the above url and the console.log the below outputs are happening. I can't figure out why the results are not the same

First visit to the url

undefined
Object {  }

After recompile and Vue UI hotreloads

This is my query
Object { q: "This is my query" }

Why can't I see this.$route on the first load?

Improve this question
4
  • Where exactly do those console.logs occur? Commented Sep 6, 2018 at 10:28
  • Sorry, edited question to show that they are running in the mounted() function Commented Sep 6, 2018 at 10:30
  • I can't reproduce it for some reason. I used vue-cli generated project, added the logs, opened Home, appended the same query string you have, and I see the q in the logs. Commented Sep 6, 2018 at 10:44
  • This is a Vue CLI generated project as well. After some digging App.vue which is loaded in the initial new Vue({}) is where the problem lies. App.vue's components can access the $route without issue Commented Sep 6, 2018 at 11:41
Related questions
9
vue-router route with params not working on page reload
1
No $route on this in a vuejs component. what's wrong?
43
Vue $route is not defined
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.