feat(nuxt): allow setting name and path for a route in `definePag…

…eMeta` (#8633)

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

@@ -266,6 +266,10 @@ definePageMeta({
 
 Of course, you are welcome to define metadata for your own use throughout your app. But some metadata defined with `definePageMeta` has a particular purpose:
 
+#### `alias`
+
+You can define page aliases. They allow you to access the same page from different paths. It can be either a string or an array of strings as defined [here](https://router.vuejs.org/guide/essentials/redirect-and-alias.html#alias) on vue-router documentation.
+
 #### `keepalive`
 
 Nuxt will automatically wrap your page in [the Vue `<KeepAlive>` component](https://vuejs.org/guide/built-ins/keep-alive.html#keepalive) if you set `keepalive: true` in your `definePageMeta`. This might be useful to do, for example, in a parent route that has dynamic child routes, if you want to preserve page state across route changes.
@@ -282,19 +286,23 @@ You can set a default value for this property [in your `nuxt.config`](/api/confi
 
 You can define the layout used to render the route. This can be either false (to disable any layout), a string or a ref/computed, if you want to make it reactive in some way. [More about layouts](/guide/directory-structure/layouts).
 
-#### `middleware`
-
-You can define middleware to apply before loading this page. It will be merged with all the other middleware used in any matching parent/child routes. It can be a string, a function (an anonymous/inlined middleware function following [the global before guard pattern](https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards)), or an array of strings/functions. [More about named middleware](/guide/directory-structure/middleware).
-
 #### `layoutTransition` and `pageTransition`
 
 You can define transition properties for the `<transition>` component that wraps your pages and layouts, or pass `false` to disable the `<transition>` wrapper for that route. You can see a list of options that can be passed [here](https://vuejs.org/api/built-in-components.html#transition) or read [more about how transitions work](https://vuejs.org/guide/built-ins/transition.html#transition).
 
 You can set default values for these properties [in your `nuxt.config`](/api/configuration/nuxt-config#layouttransition).
 
-#### `alias`
+#### `middleware`
 
-You can define page aliases. They allow you to access the same page from different paths. It can be either a string or an array of strings as defined [here](https://router.vuejs.org/guide/essentials/redirect-and-alias.html#alias) on vue-router documentation.
+You can define middleware to apply before loading this page. It will be merged with all the other middleware used in any matching parent/child routes. It can be a string, a function (an anonymous/inlined middleware function following [the global before guard pattern](https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards)), or an array of strings/functions. [More about named middleware](/guide/directory-structure/middleware).
+
+#### `name`
+
+You may define a name for this page's route.
+
+#### `path`
+
+You may define a path matcher, if you have a more complex pattern than can be expressed with the file name. See [the `vue-router` docs](https://router.vuejs.org/guide/essentials/route-matching-syntax.html#custom-regex-in-params) for more information.
 
 ### Typing Custom Metadata
 

packages/nuxt/src/pages/runtime/composables.ts

@@ -29,6 +29,10 @@ export interface PageMeta {
   layoutTransition?: boolean | TransitionProps
   key?: false | string | ((route: RouteLocationNormalizedLoaded) => string)
   keepalive?: boolean | KeepAliveProps
+  /** You may define a name for this page's route. */
+  name?: string
+  /** You may define a path matcher, if you have a more complex pattern than can be expressed with the file name. */
+  path?: string
   /** Set to `false` to avoid scrolling to top on page navigations */
   scrollToTop?: boolean
 }

packages/nuxt/src/pages/utils.ts

@@ -240,6 +240,8 @@ export function normalizeRoutes (routes: NuxtPage[], metaImports: Set<string> =
 
       return {
         ...Object.fromEntries(Object.entries(route).map(([key, value]) => [key, JSON.stringify(value)])),
+        name: `${metaImportName}?.name ?? ${route.name ? JSON.stringify(route.name) : 'undefined'}`,
+        path: `${metaImportName}?.path ?? ${JSON.stringify(route.path)}`,
         children: route.children ? normalizeRoutes(route.children, metaImports).routes : [],
         meta: route.meta ? `{...(${metaImportName} || {}), ...${JSON.stringify(route.meta)}}` : metaImportName,
         alias: aliasCode,