beforeRouteUpdate not work when different routes route to same Component

[clouds56]

Version

4.0.0-beta.7

Reproduction link

https://codesandbox.io/s/vue-router-next-beforerouteupdate-qpclb

Steps to reproduce

• Have different routes points to the same Component
• Register beforeRouteLeave, beforeRouteEnter and beforeRouteUpdate
• Switch between router-link, you would not receive all navigation event

What is expected?

1. Click on 1, shows "leave /app/1" and "enter /app/1"
2. Click on 2, shows "update /app/2"
3. Click on Home, shows "leave /" and "enter /"

What is actually happening?

1. Click on 1, shows "leave /app/1" and "enter /app/1"
2. Click on 2, nothing shows
3. Click on Home, shows "enter /"

[clouds56]

When you have routes like this

routes: [
  { path: '/', component: Foo },
  { path: '/app/:matchAll(.*)', component: Foo },
],

and Component Foo registers beforeRouteLeave, beforeRouteEnter and beforeRouteUpdate like this

beforeRouteUpdate(to, from, next) {
  console.log('update', to.path)
  next()
},

• navigate to / (tigger enter)
• then /app/1 (tigger leave and enter)
• then /app/2 (should trigger update but not)
• then / (should tigger leave but not)

[posva]

I forgot to say a workaround is to key the router-view:

<router-view :key="$route.path" />

[anncwb]

@posva <router-view :key="$route.path" /> This seems to make keepAlive invalid