$route.matched
时间: 2023-09-01 08:10:17 浏览: 159
$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 属性,我们可以获取到当前路由匹配到的所有路由记录,以便进行一些路由操作,比如根据路由记录生成面包屑导航等。
阅读全文
相关推荐












<template> <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb"> <el-breadcrumb-item>首页</el-breadcrumb-item> <el-breadcrumb-item v-for="bread in breadList" v-bind:key="bread"> {{ breadsName[bread] }} </el-breadcrumb-item> </el-breadcrumb> </template> <script lang="ts"> import { Provide, Component, Watch, Prop, Vue } from 'vue-property-decorator'; @Component export default class BreadCrumb extends Vue { @Provide() private breadsName: { [index: string]: string } = { '1': 'title1', '1-1': 'title1-1', '1-2': 'title1-2', '1-3': 'title1-3', }; @Provide() private breadList: string[] = []; private created() { this.getBreadList(); } @Watch('$route') private getBreadList() { this.breadList = []; for (const routeInfo of this.$route.matched) { if (typeof routeInfo.name === 'string' && routeInfo.name !== 'home') { this.breadList.push(routeInfo.name); } } } } </script> <style lang="less"> .breadcrumb { margin-bottom: 20px; } </style>



