@nuxt/docs-nightly 4.3.0-29440694.f7a48cb2 → 4.3.0-29441623.2e10aa7e
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -246,6 +246,27 @@ For example:
|
|
|
246
246
|
|
|
247
247
|
This will produce `/`, `/about` and `/contact` pages in your app. The `marketing` group is ignored for purposes of your URL structure.
|
|
248
248
|
|
|
249
|
+
### Accessing Route Groups
|
|
250
|
+
|
|
251
|
+
Route groups are automatically available in the route metadata as `route.meta.groups`.
|
|
252
|
+
This allows you to access the group information in your components for conditional logic, styling, or other purposes.
|
|
253
|
+
|
|
254
|
+
```vue {}[pages/(marketing)/about.vue]
|
|
255
|
+
<script setup lang="ts">
|
|
256
|
+
const route = useRoute()
|
|
257
|
+
|
|
258
|
+
console.log(route.meta.groups) // Output: ['marketing']
|
|
259
|
+
</script>
|
|
260
|
+
|
|
261
|
+
<template>
|
|
262
|
+
<div>
|
|
263
|
+
<p v-if="route.meta.groups?.includes('marketing')">
|
|
264
|
+
This is a marketing page
|
|
265
|
+
</p>
|
|
266
|
+
</div>
|
|
267
|
+
</template>
|
|
268
|
+
```
|
|
269
|
+
|
|
249
270
|
## Page Metadata
|
|
250
271
|
|
|
251
272
|
You might want to define metadata for each route in your app. You can do this using the `definePageMeta` macro, which will work both in `<script>` and in `<script setup>`:
|
|
@@ -32,6 +32,7 @@ interface PageMeta {
|
|
|
32
32
|
path?: string
|
|
33
33
|
props?: RouteRecordRaw['props']
|
|
34
34
|
alias?: string | string[]
|
|
35
|
+
groups?: string[]
|
|
35
36
|
pageTransition?: boolean | TransitionProps
|
|
36
37
|
layoutTransition?: boolean | TransitionProps
|
|
37
38
|
viewTransition?: boolean | 'always'
|
|
@@ -76,6 +77,12 @@ interface PageMeta {
|
|
|
76
77
|
|
|
77
78
|
Aliases for the record. Allows defining extra paths that will behave like a copy of the record. Allows having paths shorthands like `/users/:id` and `/u/:id`. All `alias` and `path` values must share the same params.
|
|
78
79
|
|
|
80
|
+
**`groups`**
|
|
81
|
+
|
|
82
|
+
- **Type**: `string[]`
|
|
83
|
+
|
|
84
|
+
Route groups the page belongs to, based on the folder structure. Automatically populated for pages within [route groups](/docs/4.x/guide/directory-structure/app/pages#route-groups).
|
|
85
|
+
|
|
79
86
|
**`keepalive`**
|
|
80
87
|
|
|
81
88
|
- **Type**: `boolean` | [`KeepAliveProps`](https://vuejs.org/api/built-in-components#keepalive)
|