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?

Craig Ward
  • 2,425
  • 5
  • 33
  • 51
  • Where exactly do those console.logs occur? – tony19 Sep 06 '18 at 10:28
  • Sorry, edited question to show that they are running in the `mounted()` function – Craig Ward Sep 06 '18 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. – tony19 Sep 06 '18 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 – Craig Ward Sep 06 '18 at 11:41

0 Answers0