Vue Router 的路由元信息怎么在组件里获取不到？

玉翠 Dev 提问于 2026-02-24 18:16:19 阅读 12

前端

我在用 Vue 3 + Vue Router 4，想通过路由的 meta 字段传点权限信息，但在组件里用 $route.meta 却是空的，明明路由配置里写了啊。

我试过在 setup 里用 useRoute() 拿，也还是 undefined。是不是写法有问题？

const routes = [
  {
    path: '/admin',
    component: AdminPage,
    meta: { requiresAuth: true, role: 'admin' }
  }
];

路由元信息

我来解答赞 4 收藏

反馈

2 条解答

夏侯树辰 Lv1

你这个写法本身没问题，但问题大概率出在 Vue Router 的版本和使用方式上，我猜你可能把 meta 写在了错误的位置，或者路由没正确挂载。

先确认几个关键点：

第一，你用的是 Vue Router 4（对应 Vue 3），那路由实例必须通过 createRouter + createWebHistory() 创建，并且在 app.use(router) 里注册了，否则 useRoute() 拿不到正确的上下文。

第二，检查一下你的路由定义是不是真的被用到了。比如你贴的 routes 数组有没有传给 createRouter？比如这样：

const router = createRouter({

  history: createWebHistory(),

  routes

})



app.use(router)

第三，$route 是 Vue 2 的选项式 API 写法，在 Vue 3 的 setup 里根本不存在 $route，必须用 useRoute()，但你得在组件的 setup() 里调，不是在全局或别的地方。

正确写法是：

import { useRoute } from 'vue-router'



export default {

  setup() {

    const route = useRoute()

    console.log(route.meta) // 这里应该能看到 { requiresAuth: true, role: 'admin' }

    return {}

  }

}

还有一种常见坑是：你可能在 router-view 外层套了别的组件，然后在那个外层组件里调 useRoute()，结果拿到的是父级路由的 meta，不是当前激活路由的——这种情况得在真正被 router-view 渲染的组件里用。

最后注意安全：如果你是用 meta 做权限控制（比如 role），千万别只依赖前端判断，后端必须二次校验，前端 meta 字段完全可以被用户改，别让 admin 页面只靠 meta.role === 'admin' 就放行，这太危险了。

2026-02-26 12:33

设计师晨晰 Lv1

你这个问题大概率是路由没挂载到 router 实例上，或者组件里用错了 API。Vue Router 4 里 useRoute() 返回的是响应式的当前路由对象，$route 是 Vue 2 的写法，Vue 3 里组件里别用 $route 了，直接 useRoute() 就行。

确认下你是不是这样写的：

import { useRoute } from 'vue-router'



export default {

  setup() {

    const route = useRoute()

    console.log(route.meta) // 应该能拿到 { requiresAuth: true, role: 'admin' }

  }

}

再检查下 router 配置是不是真的注册了这个 routes 数组，比如：

const router = createRouter({

  history: createWebHashHistory(),

  routes

})



app.use(router)

如果 meta 还是空的，八成是组件没被路由真正匹配到——比如路径写错了、路由没被匹配上、或者用了但嵌套路由没配对。用 console.log(route) 看一眼整个对象，别只盯着 meta。

效率更高的是：直接在 setup 里解构出 meta，避免重复访问：

const { meta } = useRoute()

const { requiresAuth, role } = meta

别整那些 Vue 2 的 $route 老黄历了，Vue 3 都 2025 年了。

2026-02-24 18:17