Skip to content

Commit 3025e82

Browse files
docs: explain per-route guards on nested routes (#2130)
1 parent 4d3cbf5 commit 3025e82

File tree

2 files changed

+23
-2
lines changed

2 files changed

+23
-2
lines changed

packages/docs/guide/advanced/navigation-guards.md

+22-1
Original file line numberDiff line numberDiff line change
@@ -197,7 +197,28 @@ const routes = [
197197
]
198198
```
199199

200-
Note it is possible to achieve a similar behavior by using [route meta fields](./meta.md) and global navigation guards.
200+
When working with [nested routes](../essentials/nested-routes), both parent and child routes can use `beforeEnter`. When placed on a parent route, it won't be triggered when moving between children with that same parent. For example:
201+
202+
```js
203+
const routes = [
204+
{
205+
path: '/user',
206+
beforeEnter() {
207+
// ...
208+
},
209+
children: [
210+
{ path: 'list', component: UserList },
211+
{ path: 'details', component: UserDetails },
212+
],
213+
},
214+
]
215+
```
216+
217+
The `beforeEnter` in the example above won't be called when moving between `/user/list` and `/user/details`, as they share the same parent. If we put the `beforeEnter` guard directly on the `details` route instead, that would be called when moving between those two routes.
218+
219+
::: tip
220+
It is possible to achieve similar behavior to per-route guards by using [route meta fields](./meta) and global navigation guards.
221+
:::
201222

202223
## In-Component Guards
203224

packages/docs/guide/essentials/nested-routes.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@ const routes = [
131131

132132
## Omitting parent components <Badge text="4.1+" />
133133

134-
We can also take advantage of the parent-child relationship between routes without needing to nest route components. This can be useful for grouping together routes with a common path prefix, or when working with [route meta fields](../advanced/meta).
134+
We can also take advantage of the parent-child relationship between routes without needing to nest route components. This can be useful for grouping together routes with a common path prefix, or when working with more advanced features, such as [per-route navigation guards](../advanced/navigation-guards#Per-Route-Guard) or [route meta fields](../advanced/meta).
135135

136136
To achieve this, we omit the `component` and `components` options from the parent route:
137137

0 commit comments

Comments
 (0)