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

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

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 会遍历路由配置数组,并找到所有匹配的路由记录。这些记录按照定义顺序从父路由到子路由进行排序。

每个路由记录都是一个对象,包含了路由的许多信息,如 pathcomponentsmeta 等。因此,可以通过 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**在导航守卫或组件内部访问这些路由记录


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

相关推荐
亭台烟雨中5 分钟前
【前端记事】关于electron的入门使用
前端·javascript·electron
泯泷19 分钟前
「译」解析 JavaScript 中的循环依赖
前端·javascript·架构
抹茶san22 分钟前
前端实战:从 0 开始搭建 pnpm 单一仓库(1)
前端·架构
Senar1 小时前
Web端选择本地文件的几种方式
前端·javascript·html
烛阴1 小时前
UV Coordinates & Uniforms -- OpenGL UV坐标和Uniform变量
前端·webgl
姑苏洛言1 小时前
扫码小程序实现仓库进销存管理中遇到的问题 setStorageSync 存储大小限制错误解决方案
前端·后端
烛阴1 小时前
JavaScript 的 8 大“阴间陷阱”,你绝对踩过!99% 程序员崩溃瞬间
前端·javascript·面试
lh_12542 小时前
ECharts 地图开发入门
前端·javascript·echarts