前端路由中的meta、matched是什么？有哪些作用？

在前端路由中，尤其是在 Vue.js 这样的框架中，meta 和 matched 是两个常见的概念，它们提供了关于路由的额外信息和上下文

1. meta

一个可以附加到 Vue Router 路由定义上的自定义字段

它通常用于存储一些与路由相关的元数据或信息，这些信息不直接参与路由的匹配，但可以在路由的导航守卫（如 beforeEach）或组件内部使用

例如，可以使用 meta 来存储一个路由是否需要身份验证的信息：

const routes = [  {  path: '/user',  component: User,  meta: { requiresAuth: true }  },  // ...其他路由  
]

然后，在路由的导航守卫中，可以检查这个 meta 字段来决定是否允许用户访问该路由：

router.beforeEach((to, from, next) => {  if (to.matched.some(record => record.meta.requiresAuth)) {  // 检查用户是否已登录  // 如果未登录，则重定向到登录页面  } else {  next(); // 确保一定要调用 next()  }  
})

2. matched

matched 是一个数组，包含了当前路由匹配到的所有路由记录（route records）

当路由被匹配时，Vue Router 会遍历路由配置数组，并找到所有匹配的路由记录。这些记录按照定义顺序从父路由到子路由进行排序。

每个路由记录都是一个对象，包含了路由的许多信息，如 path、components、meta 等。因此，可以通过 matched 数组访问到这些路由记录的信息。

假设有如下的路由配置：

const routes = [  {  path: '/user/:id',  component: User,  children: [  {  path: 'profile',  component: UserProfile  },  {  path: 'posts',  component: UserPosts  }  ]  }  
]

当用户访问 /user/123/profile 时，matched 数组将包含两个路由记录：一个是 /user/:id 的父路由记录，另一个是 /user/:id/profile 的子路由记录。可以通过 to.matched 在导航守卫或组件内部访问这些路由记录