从SPA中的Vue.js访问$route

我正在尝试在vue中访问我的路由中的元数据

在

routes.js

中，例如：

{ path: '/product/:productSlug', 
    name: 'product.slug', 
    meta: { layout: "no-snackbar" }, 
    hide: true, 
    component: require('~/pages/checkout/product'), },

这是我需要访问的

无snackbar

然后在

App.vue

中，我检查是否设置了此选项：

mounted () {
    console.log(this.$root.$route.meta.layout)
}

此

console.log

输出

未定义的
。如果我
console.log
this.$root.$route
我会得到以下结果（this.$route与
相同）：

这不是正确的路径、名称或原因元数据。一切都是空的。然后，当我签入Vue devtools时，所有设置都是正确的，
$route
中的元数据也是正确的

这表明在日志记录时尚未设置这些值，因为它们在以后是“可见的”。如果在
mounted（）
中的页面（而不是
App.vue
）中有I
console.log（this.$root.$route.meta.layout）
，则所有值也会按其应有的方式显示

因此，
App.vue
中存在问题

为了能够访问
App.vue
中的
$route
值，我缺少了什么？
您可以通过
此
从任何组件使用
currentRoute

我不确定在
App.vue
中使用
mounted（）
来执行此操作是否可行，但
updated（）
可以

updated（）{
log（这个.router.currentRoute.meta.layout）；
}
首先尝试在浏览器中访问路线，例如
localhost:3000/product/foo
，然后在App.vue中的挂载方法中添加：

mounted () {
    console.log(this.$router.currentRoute.meta.layout)
}

注意：您需要在routes.js中定义了meta属性的路由中，否则您将继续收到
未定义的
错误

为了避免出现未定义的错误，请将meta属性添加到routes.js中的每个路由中。
Hi@seantunwin感谢您的回答-使用上述方法，我仍然会得到
undefined
，如果我尝试
console.log（this.$router.currentRoute.name）
我得到了Null我在发布之前在我的当前项目中测试了答案，在我的
App.vue
中输出
updated（）
上的
currentRoute
对象，并对每个路线更改进行了处理。是的，我认为is应该也能工作-但仍然不能。所以我确实认为这个项目出了问题——我被制造这场混乱的家伙接管了。现在我正在尝试清理它。当路由改变时，无论值是多少，您是否会收到预期的日志消息？如果是这样的话，也许可以从输出
$router
开始解构日志消息，然后从那里开始工作？您好！因此，这里可能有一些东西：如果我执行
console.log（this.$router.app）
并在控制台中导航到
\u route
对象下的元数据，元数据就在那里。如果我做了
console.log（这个.$router.app.$route）
，那么现在所有的
null
-所以可能是因为
$route
。但是我怎样才能不使用meta访问它呢？嗨，谢谢你的回答。是的，我一直走在正确的路线上，所以我输入的url没有问题……只是一个随机的疑难解答猜测，您是否尝试注释掉您的组件require语句，然后尝试访问路线，看看是否收到控制台消息？
mounted () {
    console.log(this.$router.currentRoute.meta.layout)
}