fix(nuxt): prefetch object-syntax routes with <NuxtLink>

[Mini-ghost]

🔗 Linked issue

• Also allow <NuxtLink> to execute prefetch when to type props are RouteLocationRaw #19136

❓ 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

Based on PR #19120, the preloadRouteComponents function now accepts a RouteLocationRaw type as a value. This update has also been made to <NuxtLink> to allow RouteLocationRaw as a valid value type.

This PR does not modify the type of hook link:prefetch, but obtains router.resolve(to.value).fullPath before calling the hook, because others still need string path, rash modification may cause Breaking change.

nuxt/packages/nuxt/src/pages/runtime/plugins/prefetch.client.ts

Lines 23 to 40 in 7f67fce

	nuxtApp.hooks.hook('link:prefetch', (url) => {
	if (hasProtocol(url)) { return }
	const route = router.resolve(url)
	if (!route) { return }
	const layout = route?.meta?.layout
	let middleware = Array.isArray(route?.meta?.middleware) ? route?.meta?.middleware : [route?.meta?.middleware]
	middleware = middleware.filter(m => typeof m === 'string')
	for (const name of middleware) {
	if (typeof namedMiddleware[name] === 'function') {
	namedMiddleware[name]()
	}
	}
	if (layout && typeof layouts[layout] === 'function') {
	layouts[layout]()
	}
	})

nuxt/packages/nuxt/src/app/plugins/cross-origin-prefetch.client.ts

Lines 26 to 34 in 7f67fce

	nuxtApp.hook('link:prefetch', (url) => {
	const { protocol } = parseURL(url)
	if (protocol && ['http:', 'https:'].includes(protocol)) {
	externalURLs.value.add(url)
	head?.patch({
	script: [generateRules()]
	})
	}
	})

nuxt/packages/nuxt/src/app/plugins/payload.client.ts

Lines 14 to 18 in 7f67fce

	nuxtApp.hooks.hook('link:prefetch', (url) => {
	if (!parseURL(url).protocol) {
	return loadPayload(url)
	}
	})

📝 Checklist

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

[codesandbox]

  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

[danielroe]

1. we currently support prefetching external links if experimental.crossOriginPrefetch is enabled, which the router won't be able to resolve. Maybe worth adding a check for whether a link is external?
2. if we resolve in the link:prefetch hook we'll end up double-resolving
3. possible solution to 1 and reduction in resolutions - we can skip if to.value is already a string?

[Mini-ghost]

If it is an external link, to.value is a string, so I only judge whether to.value is a string, if yes, skip it, if not, execute router.resolve(to.value) .

[nathanchase]

FYI: Something in this PR broke NuxtLink (or perhaps #19309), and am now getting flooded with
[Vue warn]: Extraneous non-props attributes (rel) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. anywhere that uses a custom NuxtLink template.

Example:

<NuxtLink
  v-slot="{ href }"
  :custom="true"
  :to="`/user/${id}`"
>
    <a :href="href">
      <img src="avatar.png">
    </a>
</NuxtLink>

The above doesn't error in 3.2.2, but does in 3.2.3. - I will try to create a repro of the error in a nuxt.new StackBlitz.

[nathanchase]

StackBlitz with the error:
https://stackblitz.com/edit/github-hmvahh?file=app.vue

[danielroe]

That should be resolved in the edge channel, or in the next release with #19379