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

Question

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

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

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

编辑：

图片展示我想要的

Answer 1

您使用的 computed 不正确。您应该 return 函数中的属性。有关详细信息，请参阅 docs。

这是您改编的示例：

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

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

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

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

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

Answer 2

我用这个...

this.$router.history.current.path

Answer 3

这就是您可以访问和查看当前路由名称的方法，使用@vue/composition-api包和Vue 2 in TypeScript。

<script lang="ts">
import { defineComponent, watch } from '@vue/composition-api';

export default defineComponent({
  name: 'MyCoolComponent',
  setup(_, { root }) {
    console.debug('current route name', root.$route.name);

    watch(() => root.$route.name, () => {
      console.debug(`MyCoolComponent- watch root.$route.name changed to ${root.$route.name}`);
    });
  },
});
</script>

一旦 Vue 3.0 和 Router 4.0 发布，我将更新此答案！

Answer 4

我用这个...

this.$route.name

Answer 5

Vue 3 + Vue 路由器 4

2021 年 5 月 3 日更新

如果您正在使用 Vue 3 和 Vue Router 4，这里有两种最简单的方法来获取 [=] 中的当前路由名称12=] 挂钩:

解决方案 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}
  }
}

Answer 6

在组合 API 中，这有效

import { useRouter } from 'vue-router'

const router = useRouter()

let currentPathObject = router.currentRoute.value; 
 
console.log("Route Object", currentPathObject)

// Pick the values you need from the object

Answer 7

我用过这样的东西：

import { useRoute } from 'vue-router';

然后宣布

const route = useRoute();

最后，如果您记录 route 对象 - 您将获得我使用路径实现目标的所有属性。

Answer 8

在我的 Laravel 应用程序中，我创建了一个 router.js 文件，我可以在任何 vue 组件中访问路由器对象，例如 this.$route

我通常得到这样的路线 this.$route.path

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

How to get current name of route in Vue?

vue.js

vue-router