mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-22 05:35:13 +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`
|
||||
|
||||
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`**
|
||||
|
||||
@ -183,6 +183,24 @@ definePageMeta({
|
||||
</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
|
||||
|
||||
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