Version

3.2.0-beta.1

Reproduction link

https://github.com/AlexandreBonaventure/vue3.2-bug https://codesandbox.io/s/funny-monad-3sgle

Steps to reproduce

Click on 'Go to Route A' then on 'Go to Route B' and observe the error thrown in the console

What is expected?

It should not throw any error and switch route correctly (works with vue<3.2)

What is actually happening?

Error

Trying to boil it down without Vue Router by simulating the injected $route but still haven't found it.

A much simpler repro is without nested routes, nor redirects:

import { h } from '@vue/runtime-core'
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

const routes: RouteRecordRaw[] = [
  {
    name: 'a',
    path: '/a/:id',
    component: () => import('./ARoute.vue'),
  },
  {
    name: 'b',
    path: '/b',
    component: { render: () => h('div', 'B content') },
  },
]

export const router = createRouter({
  history: createWebHistory(),
  routes,
})

ARoute.vue

<template>
  <pre>{{ $route.params.id.toUpperCase() }}</pre>
</template>

App.vue

<template>
  <nav class="flex pa4" style="gap: 30px">
    <RouterLink :to="{ name: 'a', params: { id: 'test' } }">Go to A</RouterLink>
    <RouterLink :to="{ name: 'b' }">Go to B</RouterLink>
  </nav>
  <RouterView />
</template>

Closing in favor of https://github.com/vuejs/vue-next/issues/4149

FYI this is not entirely the same as #4149 as it also involves a scheduler bug where computed scheduler jobs are not correctly appended (fixed in d810a1a5)

FYI, I upgraded to 3.2.0-beta-2 and while the repro is now working, our repo that initiated this issue is still failing. Will update soon