Skip to content

Commit f4d1866

Browse files
committed
docs(params): document unamed param pathMatch
1 parent 6ba8682 commit f4d1866

File tree

1 file changed

+30
-0
lines changed

1 file changed

+30
-0
lines changed

docs/guide/essentials/dynamic-matching.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,36 @@ const User = {
6565
}
6666
```
6767

68+
## Catch all / 404 Not found Route
69+
70+
Regular params will only match characters in between url fragments, separated by `/`. If we want to match **anything**, we can use the asterisk (`*`):
71+
72+
```js
73+
{
74+
// will match everything
75+
path: '*'
76+
}
77+
{
78+
// will match anything starting with `/user-`
79+
path: '/user-*'
80+
}
81+
```
82+
83+
When using _asterisk_ routes, make sure to correctly order your routes so that _asterisk_ ones are at the end.
84+
The route `{ path; '*' }` is usually used to 404 client side. If you are using _History mode_, make sure to [correctly configure your server](./history-mode.md) as well.
85+
86+
When using an _asterisk_, a param named `pathMatch` is automatically added to `$route.params`. It contains the rest of the url matched by the _asterisk_:
87+
88+
```js
89+
// Given a route { path: '/user-*' }
90+
this.$router.push('/user-admin')
91+
this.$route.params.pathMatch // 'admin'
92+
93+
// Given a route { path: '*' }
94+
this.$router.push('/non-existing')
95+
this.$route.params.pathMatch // '/non-existing'
96+
```
97+
6898
## Advanced Matching Patterns
6999

70100
`vue-router` uses [path-to-regexp](https://github.com/pillarjs/path-to-regexp) as its path matching engine, so it supports many advanced matching patterns such as optional dynamic segments, zero or more / one or more requirements, and even custom regex patterns. Check out its [documentation](https://github.com/pillarjs/path-to-regexp#parameters) for these advanced patterns, and [this example](https://github.com/vuejs/vue-router/blob/dev/examples/route-matching/app.js) of using them in `vue-router`.

0 commit comments

Comments
 (0)