A route component should unmount before navigation happens

[sto3psl]

Version

4.0.6

Reproduction link

https://codesandbox.io/s/awesome-albattani-b1uvt

Steps to reproduce

In the linked CodeSandbox open the console and follow these steps:

1. Click on Route 2 link
2. Click on Home link
3. Check URL bar and console output

What is expected?

After navigation from /route to / I should see the correct URL in the URL bar -> / and the console output should be:

Route.vue unmount
Navigated to: /
HelloWorld.vue mounted

What is actually happening?

After navigation from /route to /, the URL bar shows /?test=hello and the console output is:

Navigated to: /
Route.vue watchEffect: /
Route.vue unmount
HelloWorld.vue mounted

---

By having a watchEffect that depends on the route value this bug causes code to run after a route change happened and can trigger unintended side effects.

[sto3psl]

I think this is related to #3393

[posva]

Component mounting is not directly connected to navigation and will never be because there are too many scenarios where it's not always possible. In most scenarios, you can just wait for nextTick():

router.afterEach((to) => {
  console.log("Navigated to: ", to.path);
  nextTick().then(() => {
    console.log('actual navigated to')
  })
});

---

Remember to use the forum or the Discord chat to ask questions!