docs: add information on custom path regexp in definePageMeta (#25073)

This commit is contained in:
Larry Williamson 2024-01-16 07:54:27 -05:00 committed by GitHub
parent 20e88bb171
commit b3fb75c00e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -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`: