$route.matched
时间: 2023-09-01 17:10:17 浏览: 36
$route.matched是Vue.js路由中的一个属性,它是一个数组,包含当前路由匹配到的所有路由记录。每个记录包含一个路径(path),一个组件(component)和一些其他信息,如路由参数(params)、查询参数(query)等。通过$route.matched,我们可以访问到当前路由对应的所有组件和路由信息。
相关问题
vue $route.matched
`$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` 参数的值。
举例说明this.$route.matched是什么
this.$route.matched 是 Vue.js 中 $route 对象的一个属性,它是一个数组,包含了当前路由匹配到的所有路由记录。假设当前路由为 /user/profile,那么 matched 数组将包含如下对象:
```
[
{
path: '/user',
component: User,
meta: { requiresAuth: true }
},
{
path: '/user/profile',
component: Profile,
meta: { requiresAuth: true }
}
]
```
其中,每个对象都包含了路由记录的相关信息,如 path 表示路由路径、component 表示对应的组件、meta 表示路由元信息。通过 $route.matched 属性,我们可以获取到当前路由匹配到的所有路由记录,以便进行一些路由操作,比如根据路由记录生成面包屑导航等。