vue $route.matched
时间: 2023-09-01 18:10:53 浏览: 60
`$route.matched` 是 Vue Router 中的一个属性,它是一个数组,包含了当前路由的所有嵌套路径片段的路由记录,从根路径开始直到当前路径。
每个路由记录包含了路由配置对象以及可选的路径参数、查询参数和 hash 值等信息。`$route.matched` 数组中最后一个元素是当前路由记录对象。
你可以通过 `$route.matched` 数组来访问当前路由的父级路由信息、路径参数和查询参数等信息,以及在动态路由嵌套中访问父子路由之间的信息。
举个例子,如果当前路由为 `/users/1/profile`,那么 `$route.matched` 数组中将包含如下路由记录对象:
```
[
// 根路由
{
path: '/',
component: RootComponent
},
// /users 路由
{
path: '/users',
component: UsersComponent
},
// /users/:id 路由
{
path: '/users/:id',
component: UserComponent,
props: true
},
// /users/:id/profile 路由
{
path: '/users/:id/profile',
component: ProfileComponent,
props: true
}
]
```
你可以通过访问 `$route.matched[0]` 来获取根路由的配置信息,访问 `$route.matched[1]` 来获取 `/users` 路由的配置信息,以此类推。你还可以通过 `props` 属性来访问路径参数,例如 `$route.matched[2].props.id` 将返回当前路由的 `id` 参数的值。