fix(nuxt3)!: sync route object to currently resolved page

[danielroe]

🔗 Linked issue

resolves nuxt/nuxt#13645, resolves https://github.com/nuxt/framework/discussions/2459

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This PR does two things:

1. correctly resolves the route for use within plugins (previously useRoute() did not return the correct route until the plugin lifecycle had fully run)
2. creates a 'suspended' route that mirrors the behaviour of the page component - so it does not resolve to the new route until the page component resolves

I would especially welcome testing on this given the nature of the change.

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[netlify]

✅ Deploy Preview for nuxt3-docs ready!

Name	Link
🔨 Latest commit	297c87e
🔍 Latest deploy log	https://app.netlify.com/sites/nuxt3-docs/deploys/624c53f0cfa6290008475187
😎 Deploy Preview	https://deploy-preview-4092--nuxt3-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[atinux]

Nice work @danielroe

It would be nice to test indeed and check if it works when using a nested page too 😊

[pi0]

Looks good to me. Please ping when did additional tests otherwise we can try with edge to test behavior.

[danielroe]

Tested ✅

Note: At the moment, a nested page's async setup doesn't block the loading of the parent, which means it doesn't block the updating of the route object. That may be a separate issue to track, but it doesn't seem to be an issue with this PR.

[misaon]

@danielroe I fighting with following case:

app.vue

<template>
  <div>
    <NuxtLayout>
      <NuxtPage/>
    </NuxtLayout>
  </div>
</template>

pages/index.vue

<template>
  <div>
    <NuxtLink to="/hi.html">
      Go to Hi page
    </NuxtLink>
  </div>
</template>

pages/[slug].html.vue

<template>
  <div>
    <h1>Hi</h1>
  </div>
</template>

<script lang="ts" setup>
const route = useRoute()

console.log(route.params)
</script>

console

{}

How can i get slug param value now after your change?

[misaon]

Im going back to 3.0.0-27486179.cb74ab6