Calling `this.$route causes huge flickering

[antoinerey]

Note that this issue was originaly created in nuxt/nuxt#4945.

Reproduction link

https://codesandbox.io/s/14qm9krom7

Steps to reproduce

1. Navigate back and forth between the home and about pages. Everything works properly, and there is no flickering at all.
2. Open the layouts/default.vue file, uncomment console.log(this.$route).
3. Navigate again between the home and about pages. When leaving the home page (using the default layout under the hood), a big flickering happens.

Note that the exact opposite happens when adding console.log(this.$route) in layouts/random.vue instead.

What is expected ?

No flickering at all.

What is actually happening?

Some huge flickering.

Additional comments?

For some reason, I need to disable a JS script based on a query parameter. Accessing / should load the script, but accessing /?script=false should prevent the script to load. So, I needed to access this.$route, and ran into this bug.

[pimlie]

As mentioned in my comment in the linked Nuxt issue, we should have more control for throttling updates for issues like this.
Also I think we should treat page navigation (with vue-router) as a special case and add navigation guards to only update the head once after navigation has finished

[pimlie]

Closing as changes for this issue are included in the v2 release candidate. Please help us testing the release candidate and report any follow-ups in a new issue