useRoute() is now empty in layout context after using navigateTo

[xollaborator]

Environment

• Operating System: Linux
• Node Version: v16.17.0
• Nuxt Version: 3.0.0-rc.13
• Nitro Version: 0.6.1
• Package Manager: pnpm@7.14.2
• Builder: vite
• User Config: -
• Runtime Modules: -
• Build Modules: -

Reproduction

https://stackblitz.com/edit/nuxt-starter-92t5di?file=nuxt.config.ts,app.vue,layouts%2Fdefault.vue,pages%2Findex.vue,layouts%2Fuser.vue,pages%2Fuser%2F[id].vue

Workaround is commented out in user.vue.

Please note that url is NOT refreshing in stackblitz' preview. To recreate the issue again you will need to manually open other page and then the main path again, e.g.:

https://nuxt-starter-92t5di--3000.local-credentialless.webcontainer.io/user/1
https://nuxt-starter-92t5di--3000.local-credentialless.webcontainer.io/

Describe the bug

Changes in layout introduced in nuxt/framework#7940 have broken this feature after release of RC12.

I've intended to work on PR but I can't solve it. You might find a workaround on user side in repro but here is what I've tried in line 52 in app/components/layout.ts:

1. useRouterRoute() and useRoute() are empty (hence the bug),
2. adding useRouter().currentRoute.value from #app prevents the layout from updating to new one (so the workaround cannot be applied here, at least in a way I can think of),
3. using injectedRoute always results in page render first then layout render and second page rerender (so reintroduces the bug fixed in fix(nuxt): page hydration and double load framework#7940).

BTW. 3 fixtures introduced in the above PR are failing in all 3 cases in my env due to 10s timeout (besides 1 other case).

I hope that helps, but I guess we will need to wait for <Suspense> to work properly first.

Additional context

No response

Logs

No response

[danielroe]

This is the same root issue as #15144 and is an upstream issue in Vue.

For now, ensure that you do not destructure the prop value:

  <script setup>
  const route = useRoute();
  const id = route.params.id;
  // const router = useRouter();
  // const id = router.currentRoute.value.params.id;
  console.log('layout - user id: ', id);
  </script>

  <template>
    <div>
-     <h1>Layout - user id: {{ id ?? '[id is undefined]' }}</h1>
+     <h1>Layout - user id: {{ route.params.id }}</h1>
      <slot />
    </div>
  </template>