mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-22 13:45:18 +00:00
docs: add information on custom path regexp in definePageMeta
(#25073)
This commit is contained in:
parent
20e88bb171
commit
b3fb75c00e
@ -60,7 +60,7 @@ interface PageMeta {
|
|||||||
|
|
||||||
- **Type**: `string`
|
- **Type**: `string`
|
||||||
|
|
||||||
You may define a path matcher, if you have a more complex pattern than can be expressed with the file name.
|
You may define a [custom regular expression](#using-a-custom-regular-expression) if you have a more complex pattern than can be expressed with the file name.
|
||||||
|
|
||||||
**`alias`**
|
**`alias`**
|
||||||
|
|
||||||
@ -183,6 +183,24 @@ definePageMeta({
|
|||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### Using a Custom Regular Expression
|
||||||
|
|
||||||
|
A custom regular expression is a good way to resolve conflicts between overlapping routes, for instance:
|
||||||
|
|
||||||
|
The two routes "/test-category" and "/1234-post" match both `[postId]-[postSlug].vue` and `[categorySlug].vue` page routes.
|
||||||
|
|
||||||
|
To make sure that we are only matching digits (`\d+`) for `postId` in the `[postId]-[postSlug]` route, we can add the following to the `[postId]-[postSlug].vue` page template:
|
||||||
|
|
||||||
|
```vue [pages/[postId]-[postSlug].vue]
|
||||||
|
<script setup lang="ts">
|
||||||
|
definePageMeta({
|
||||||
|
path: '/:postId(\\d+)-:postSlug'
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
For more examples see [Vue Router's Matching Syntax](https://router.vuejs.org/guide/essentials/route-matching-syntax.html).
|
||||||
|
|
||||||
### Defining Layout
|
### Defining Layout
|
||||||
|
|
||||||
You can define the layout that matches the layout's file name located (by default) in the [`layouts/` directory](/docs/guide/directory-structure/layouts). You can also disable the layout by setting the `layout` to `false`:
|
You can define the layout that matches the layout's file name located (by default) in the [`layouts/` directory](/docs/guide/directory-structure/layouts). You can also disable the layout by setting the `layout` to `false`:
|
||||||
|
Loading…
Reference in New Issue
Block a user