前端路由中的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 提供了关于路由的额外信息和上下文,能够更灵活地控制路由的行为和组件的渲染

相关推荐
Lingxing几秒前
Vue组件树:从设计到实现的全方位指南 🚀
前端·vue.js
玖玖passion2 分钟前
leader:请你用Protobuf进行数据交互🥲
前端
Linruoxin5 分钟前
为什么给 body 设置背景会直接铺满整个视口?
前端·css
Jenlybein8 分钟前
Vue3 权限控制:利用动态路由与自定义指令
前端·vue.js
codelang1 小时前
Cline + MCP 开发实战
前端·后端
好_快3 小时前
Lodash源码阅读-memoizeCapped
前端·javascript·源码阅读
好_快3 小时前
Lodash源码阅读-toString
前端·javascript·源码阅读
好_快3 小时前
Lodash源码阅读-memoize
前端·javascript·源码阅读
excel3 小时前
webpack 核心编译器 十四 节
前端
excel3 小时前
webpack 核心编译器 十三 节
前端