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
Load 7 more related questions Show fewer related questions

0

Reset to default

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.