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

五秒法则2024-07-01 22:22

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

1. meta

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

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

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

javascript 复制代码

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

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

javascript 复制代码

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 数组访问到这些路由记录的信息。

假设有如下的路由配置：

javascript 复制代码

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**在导航守卫或组件内部访问这些路由记录

总之，meta 和 matched 提供了关于路由的额外信息和上下文，能够更灵活地控制路由的行为和组件的渲染