Current route's query unaccessible on the App's created hook when using lazy loaded routes

[ThomasFerro]

Version

3.0.2

Reproduction link

https://codesandbox.io/s/7mmqoqz18j

Steps to reproduce

• Start a new vue-cli 3 project with vue-router
• In the App.vue component, add this created hook :

created() {
  console.log('created', this.$route.query, this.$route.query && this.$route.query.test);
},

• Run the application using the url http://localhost:8080/#/about?tiers=tezst

What is expected?

The query should be present in the this.$route object.

What is actually happening?

It is not.

---

Sorry but I cannot get vue-router working on the online IDEs.

I think this is due to the lazy loading because it does works however when calling the home page http://localhost:8080/#/?tiers=tezst.

[posva]

Was this working in the previous version? I'm having a hard time reproducing with an older version with code sandbox and I cannot test very well

[ThomasFerro]

Hi, I don't know if it worked before but I can send you a minimalist project where the issue is reproduced ?

[posva]

no, don't worry. Now that I'm home I can check it on a computer 😄

[posva]

What's happening is that because the route is lazy loaded, we need to wait for it and its navigation guards before actually triggering the navigation, so when we land on the /, we are still not in the actual / route during the created hook, so the $route property isn't up to date. If you change the path of the lazy loaded route to something like /no, you will see that the $route object still contains / (this should help visualise what is actually happening)

[ricardocastanho]

I'm having this problem. @ThomasFerro how did you workaround this problem?

[ThomasFerro]

@ricardocastanho It's been a few years, I cannot remember how we managed to workaround the issue. We may have watched the $route object.

[ricardocastanho]

Funny part is that logging at App.vue doesn't work at all, but logging in the lazy loaded component it works like a charm 😅.

My workaround is moving the logic to the route's component.