You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/guide/essentials/route-matching-syntax.md
+11-5Lines changed: 11 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,4 +1,4 @@
1
-
# Route Matching Syntax
1
+
# Routes' Matching Syntax
2
2
3
3
Most applications will use static routes like `/about` and dynamic routes like `/users/:userId` like we just saw in [Dynamic Route Matching](./dynamic-matching.md), but Vue Router has much more to offer!
4
4
@@ -30,11 +30,15 @@ const routes = [
30
30
]
31
31
```
32
32
33
-
Make sure to **escape backslashes `\`** like we did with `\d` to actually pass the backslash character to a string in JavaScript.
33
+
Now, going to `/25` will match `/:orderId` while going to anything else will match `/:productName`. The order of the `routes` array doesn't even matter!
34
+
35
+
:::tip
36
+
Make sure to **escape backslashes (`\`)** like we did with `\d` (becomes `\\d`) to actually pass the backslash character in a string in JavaScript.
37
+
:::
34
38
35
39
## Repeatable params
36
40
37
-
If you need to match routes with multiple sections like `/first/second/third`, you can mark a param as repeatable with `*` (0 or more) and `+` (1 or more):
41
+
If you need to match routes with multiple sections like `/first/second/third`, you should mark a param as repeatable with `*` (0 or more) and `+` (1 or more):
38
42
39
43
```js
40
44
constroutes= [
@@ -64,14 +68,16 @@ These can also be combined with custom Regexp by adding them **after the closing
64
68
```js
65
69
constroutes= [
66
70
// only match numbers
71
+
// matches /1, /1/2, etc
67
72
{ path:'/:chapters(\\d+)+' },
73
+
// matches /, /1, /1/2, etc
68
74
{ path:'/:chapters(\\d+)*' },
69
75
]
70
76
```
71
77
72
78
## Optional parameters
73
79
74
-
You can also mark a parameter as optional by using the `?` modifier:
80
+
You can also mark a parameter as optional by using the `?` modifier (0 or 1):
75
81
76
82
```js
77
83
constroutes= [
@@ -82,7 +88,7 @@ const routes = [
82
88
]
83
89
```
84
90
85
-
Note that `*` also marks the parameter as optional but cannot be repeated
91
+
Note that `*`technically also marks a parameter as optional but `?` parameters cannot be repeated.
0 commit comments