如何在 Vue 中获取当前路由的名称？

Question

我想获取 vue-router 当前路由的名称，我有一个组件菜单可以导航到另一个组件，所以我想显示当前路由的名称。我有这个：

 created(){
    this.currentRoute;
    //this.nombreRuta = this.$route.name;
},
computed:{
    currentRoute:{
        get(){
            this.nombreRuta = this.$route.name;
        }
    }
}

但是路由名称的标签并没有改变，标签只显示第一个加载的路由的名称。谢谢你

编辑：

显示我想要的图像

原文由 Isaías Orozco Toledo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您正在错误地使用 computed 。您应该在函数中返回属性。有关更多信息，请参阅 文档。

这是您改编的示例：

 computed: {
    currentRouteName() {
        return this.$route.name;
    }
}

然后你可以像这样使用它：

 <div>{{ currentRouteName }}</div>

您也可以直接在模板中使用它而不使用计算属性，如下所示：

 <div>{{ $route.name }}</div>

原文由 ssc-hrep3 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

Vue 3 + Vue 路由器 4

2021 年 5 月 3 日更新

如果您使用的是 Vue 3 和 Vue Router 4 ，这里有两种最简单的方法可以在 setup 挂钩中获取当前路由名称：

解决方案1 ：使用 useRoute

 import { useRoute } from 'vue-router';
export default {
  setup () {
    const currentRoute = computed(() => {
      return useRoute().name
    })
    return { currentRoute }
  }
}

解决方案2 ：使用 useRouter

 import { useRouter } from 'vue-router';
export default {
  setup () {
    const currentRoute = computed(() => {
      return useRouter().currentRoute.value.name;
    })
    return {currentRoute}
  }
}

原文由 KitKit 发布，翻译遵循 CC BY-SA 4.0 许可协议