Skip to content

Commit

Permalink
docs: explain per-route guards on nested routes (#2130)
Browse files Browse the repository at this point in the history
  • Loading branch information
skirtles-code committed Feb 6, 2024
1 parent 4d3cbf5 commit 3025e82
Show file tree
Hide file tree
Showing 2 changed files with 23 additions and 2 deletions.
23 changes: 22 additions & 1 deletion packages/docs/guide/advanced/navigation-guards.md
Original file line number Diff line number Diff line change
Expand Up @@ -197,7 +197,28 @@ const routes = [
]
```

Note it is possible to achieve a similar behavior by using [route meta fields](./meta.md) and global navigation guards.
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:

```js
const routes = [
{
path: '/user',
beforeEnter() {
// ...
},
children: [
{ path: 'list', component: UserList },
{ path: 'details', component: UserDetails },
],
},
]
```

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.

::: tip
It is possible to achieve similar behavior to per-route guards by using [route meta fields](./meta) and global navigation guards.
:::

## In-Component Guards

Expand Down
2 changes: 1 addition & 1 deletion packages/docs/guide/essentials/nested-routes.md
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ const routes = [

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

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).
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).

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

Expand Down

0 comments on commit 3025e82

Please sign in to comment.