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

您未正确使用 computed。您应该在函数中返回属性。有关详细信息，请参阅 docs。

这是您改编的示例：

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

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

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

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

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

---

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}
  }
}

---

我用这个...

this.$router.history.current.path

---

在 Composition 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

---

这就是您如何在 TypeScript 中使用带有 Vue 2 的 @vue/composition-api 包访问和观察当前路线的名称。

<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 发布，我将更新这个答案！

---

我用这个...

this.$route.name

---

我用过这样的东西：

import { useRoute } from 'vue-router';

然后宣布

const route = useRoute();

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

---

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

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

---

this.$router.currentRoute.value.name;

就像这样工作。$route.name。

---

使用带有 Composition API 的 Vue 3 和 Vue Router 4 并计算：

<script setup>
    import { computed } from 'vue'
    import { useRouter } from 'vue-router'

    // computed
    const currentRoute = computed(() => {
        const router = useRouter()
        return router.currentRoute.value.name
    })
</script>

<template>
    <div>{{ currentRoute }}</div>
</template>

⚠ 如果您没有在路由器中设置名称，则不会显示名称：

const routes = [
    { path: '/step1', name: 'Step1', component: Step1 },
    { path: '/step2', name: 'Step2', component: Step2 },
];

---