useRoute().params.param evaluates to undefined on navigation from /:param to / when using nested <router-view />

[DrJume]

Version

4.1.6

Reproduction link

stackblitz.com

--> Open in New Tab and open Console in DevTools.

Steps to reproduce

1. Use router with subroutes under a nested RouterView (from 'vue-router')

{
  path: '/routerView/',
  component: RouterView,
  children: [
    {
      path: '',
      component: Home,
    },
    {
      path: ':param',
      component: Param,
    },
  ],
},

2. Watch useRoute().params.param inside Param.vue

What is expected?

Watching useRoute().params.param does not trigger when going from /routerView/123 to /routerView.

What is actually happening?

useRoute().params.param evaluates to undefined when navigating from /routerView/123 to /routerView.

Additional comments

When a nested <router-view /> (component: RouterView) isn't used, it works as expected.

[DrJume]

A workaround is to stop the effect of a computed in an onBeforeRouteLeave hook.

const param = computed(() => route.params.param as string)

onBeforeRouteLeave(() => {
  param.effect.stop()
})

[posva]

Normally, one wouldn't put the RouterView in the component option, it should just be omitted and it will work. Did you find any outdated documentation showing to use RouterView like that?

[DrJume]

I know, it used to be necessary, but I just wanted to demonstrate that the issue only happens when using a nested RouterView.
To keep it minimal I used RouterView directly, not using it inside of e.g layout component.

[DrJume]

This is a real issue happening in a application, where 2-3 nested layouts are used.

[posva]

Duplicate of vuejs/core#7030