Merge branch 'main' into main

docs/2.guide/2.directory-structure/1.pages.md

@@ -205,7 +205,7 @@ If you want more control over when the `<NuxtPage>` component is re-rendered (fo
 <template>
   <div>
     <h1>I am the parent view</h1>
-    <NuxtPage :page-key="someKey" />
+    <NuxtPage :page-key="route => route.fullPath" />
   </div>
 </template>
 ```

docs/2.guide/2.directory-structure/3.app.md

@@ -34,7 +34,7 @@ If you have a [`pages/`](/docs/guide/directory-structure/pages) directory, to di
 ```
 
 ::alert{type=danger}
-Since Nuxt 3 uses [`<Suspense>`](https://vuejs.org/guide/built-ins/suspense.html#suspense) inside `<NuxtPage>`, it cannot be set as a root element.
+Since `<NuxtPage>` internally uses the [`<Suspense>`](https://vuejs.org/guide/built-ins/suspense.html#suspense) component, `<NuxtPage>` cannot be set as a root element.
 ::
 
 ::alert{type=warning}

docs/3.api/2.components/2.nuxt-page.md

@@ -34,6 +34,12 @@ For example, passing `static` key, `NuxtPage` component is rendered only once wh
 <NuxtPage page-key="static" />
 ```
 
+You can also use a dynamic key based on the current route. (Don't use `$route` object here as it can cause problems with how `<NuxtPage>` renders pages with `<Suspense>`.)
+
+```html
+<NuxtPage :page-key="route => route.fullPath" />
+```
+
 Alternatively, `pageKey` can be passed as a `key` value via `definePageMeta` from the `<script>` section of your Vue component in the `/pages` directory.
 
 ```js

packages/nuxt/src/app/plugins/router.ts

@@ -58,7 +58,7 @@ function getRouteFromPath (fullPath: string | Partial<Route>) {
   }
 }
 
-type RouteGuardReturn = void | Error | string | false
+type RouteGuardReturn = void | Error | string | boolean
 
 interface RouteGuard {
   (to: Route, from: Route): RouteGuardReturn | Promise<RouteGuardReturn>
@@ -130,7 +130,7 @@ export default defineNuxtPlugin<{ route: Route, router: Router }>({
           // Cancel navigation
           if (result === false || result instanceof Error) { return }
           // Redirect
-          if (result) { return handleNavigation(result, true) }
+          if (typeof result === 'string' && result.length) { return handleNavigation(result, true) }
         }
 
         for (const handler of hooks['resolve:before']) {
@@ -250,6 +250,7 @@ export default defineNuxtPlugin<{ route: Route, router: Router }>({
                 return nuxtApp.runWithContext(() => showError(error))
               }
             }
+            if (result === true) { continue }
             if (result || result === false) { return result }
           }
         }

packages/nuxt/src/pages/runtime/plugins/router.ts

@@ -179,6 +179,7 @@ const plugin: Plugin<{ router: Router }> = defineNuxtPlugin({
             }
           }
 
+          if (result === true) { continue }
           if (result || result === false) {
             return result
           }

test/fixtures/basic/middleware/abort.global.ts

@@ -4,4 +4,5 @@ export default defineNuxtRouteMiddleware((to) => {
       statusCode: 401
     })
   }
+  return true
 })