Vue Router 怎么在路由中配置 meta 元信息存储自定义数据-Vue.js-PHP中文网

直接在路由配置对象中添加meta字段即可，它是一个普通对象，可自由定义requiresAuth、title等任意自定义属性；未声明时默认为{}；嵌套路由需遍历to.matched判断多级meta，组件内用$route.meta或useRoute().meta读取，守卫中推荐用to.meta获取最深层路由的meta。

vue router 怎么在路由中配置 meta 元信息存储自定义数据

直接在路由配置对象里加 meta 字段就行，它是个普通对象，你可以往里面放任何你需要的自定义数据，比如权限标识、页面标题、过渡效果名等。

meta 字段怎么写

在定义 routes 数组时，每个路由对象（包括嵌套路由）都可以添加 meta 属性：

它必须是对象类型，不能是字符串、布尔值或数组（否则会报错或被忽略）
字段名完全自由，比如 requiresAuth、title、roles、transition、keepAlive 都可以
未声明 meta 的路由，默认 route.meta 是空对象 {}，不会为 undefined

示例：

{ path: '/admin', component: () => import('@/views/Admin.vue'), meta: { title: '管理后台', requiresAuth: true, roles: ['admin'], transition: 'slide-left' } }

嵌套路由中的 meta 怎么处理

嵌套路由匹配时，to.matched 是一个数组，包含所有匹配到的路由记录（父 + 子）。每个记录都有自己的 meta，互不影响。

蓝湖代码转vue2.0+element-ui

将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.

下载

父路由和子路由可以各自定义 meta，比如父设 title: '用户中心'，子设 requiresAuth: true
如果想“继承”或“合并”父级 meta（如统一 requireAuth），需手动遍历 to.matched 判断
常见做法：用 to.matched.some(r => r.meta.requiresAuth) 检查任意一级是否需要鉴权

meta 数据怎么读取和使用

meta 主要在两个地方用到：组件内部和导航守卫中。

组件内可通过 this.$route.meta（Vue 2）或 useRoute().meta（Vue 3 Composition API）访问当前路由的 meta
但在全局守卫（如 router.beforeEach）中，推荐用 to.meta —— 它是 Vue Router 自动合并后的顶层 meta（只取最深层匹配路由的 meta，不合并父级）
若需完整判断（比如某功能要求父级和子级都满足条件），则必须遍历 to.matched

例如动态设标题：

router.beforeEach((to, from, next) => { if (to.meta.title) { document.title = to.meta.title; } next(); });