前端路由的 meta 信息怎么在组件里获取不到？

钰珂酱~ 提问于 2026-03-25 11:24:20 阅读 6

前端

我用 Vue Router 配了路由元信息，想在组件里通过 this.$route.meta 拿到，但一直是空对象，明明路由配置里写了啊。

这是我的路由配置：

const routes = [
  {
    path: '/dashboard',
    component: () => import('@/views/Dashboard.vue'),
    meta: { title: '仪表盘', requiresAuth: true }
  }
]

但在 Dashboard.vue 里打印 console.log(this.$route.meta) 却输出 {}，是不是哪里写错了？

我来解答赞 0 收藏

反馈

1 条解答

设计师毅蒙 Lv1

在 Vue Router 中配置路由元信息并在组件中访问是很常见的操作，看起来你已经在路由配置中正确地添加了 meta 信息。不过，如果你在组件里获取到的是一个空对象，可能有几个原因导致这个问题。

首先，确保你在正确的生命周期钩子中访问 this.$route.meta。有时候在组件初始化时，路由信息可能还没有完全准备好。通常推荐在 mounted 钩子中进行访问，这样可以确保路由信息已经加载完成。

其次，检查一下是否有其他地方覆盖了或者修改了路由信息。虽然这不太常见，但也是一种可能性。

最后，确认一下你的 Vue Router 版本是否支持你所使用的语法和特性。不过，从你的描述来看，这应该不是问题所在。

按照标准写法，你可以在组件的 mounted 钩子中这样访问 meta 信息：

pre class="pure-highlightjs line-numbers">

export default {

  mounted() {

    console.log(this.$route.meta);

  }

}

如果按照上述方法依然无法获取到 meta 信息，建议检查一下控制台是否有其他错误提示，这些错误可能会间接影响到路由的正常工作。希望这些建议能帮到你。

2026-03-25 12:03