vue.js - 如何在Vue中获取当前的路由名称？

Question

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

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

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

编辑:

显示我想要的图像

Answer 1

您错误地使用了computed。您应该在函数中返回该属性。查看docs获取更多信息。

这是您改编的示例:

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

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

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

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

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