diff --git a/docs/3.api/3.utils/define-page-meta.md b/docs/3.api/3.utils/define-page-meta.md index 12ff64f4fa..a02bccf086 100644 --- a/docs/3.api/3.utils/define-page-meta.md +++ b/docs/3.api/3.utils/define-page-meta.md @@ -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 [path matcher](#using-an-advanced-path-matcher), if you have a more complex pattern than can be expressed with the file name. **`alias`** @@ -183,6 +183,24 @@ definePageMeta({ ``` +### Using an advanced path matcher + +A path matcher 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. + +In order 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] + +``` + +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`: