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

小开

最佳答案

您使用的 computed不正确。应该返回函数中的属性。有关更多信息，请参见医生。

下面是你的改编例子:

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

然后你可以这样使用它:

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

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

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

小开

我用这个..。

this.$router.history.current.path

小开

This is how you can 访问和监视当前路由的名称 using @vue/composition-api package with TypeScript 中的 Vue 2。

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

小开

我用这个..。

this.$route.name

小开

Vue 3 + Vue 路由器4

更新5/03/2021

如果你正在使用 Vue 3和 Vue 路由器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}
}
}

小开

在组合 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

小开

我用了这样的东西:

import { useRoute } from 'vue-router';

然后宣布

const route = useRoute();

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

小开

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

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

小开

this.$router.currentRoute.value.name;

就像 this.$route.name一样。

小开

将 Vue 3和 Vue 路由器4与 组合 API一起使用并计算:

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


const router = useRouter()


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


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

Something 如果你没有像这样在你的路由器中设置一个名字，那么就不会显示任何名字:

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

小开

下面是如何在组合 api (vue3)中获得当前页面的 id (name) :

import { useRoute } from 'vue-router';


export function useFetchPost() {
const currentId = useRoute().params.id;
const postTitle = ref('');


const fetchPost = async () => {
try {
const response = await axios.get(
`https://jsonplaceholder.typicode.com/posts/${currentId}`
);
postTitle.value = response.data.title;
} catch (error) {
console.log(error);
} finally {
}
};


onMounted(fetchPost);


return {
postTitle,
};

}

小开

我在 第三段和 Vue 路由器4上使用这个方法
它工作得很好

<script>
import { useRoute } from 'vue-router'


export default {
name: 'Home',
setup() {
const route = useRoute();
const routeName = route.path.slice(1); //route.path will return /name


return {
routeName
}
}
};
</script>

<p>This is <span>\{\{ routeName }}</span></p>

小开

Using composition API,

<template>
<h1>\{\{Route.name}}</h1>
</template>


<script setup>
import {useRoute} from 'vue-router';


const Route = useRoute();
</script>

小开

我试过了，它奏效了:

在你的元素中使用以下内容;

\{\{ this.$route.path.slice(1) }}

小开

在 Vue 3.2中使用组合 API

<script lang="ts" setup>
  

import { useRoute } from "vue-router";


const route = useRoute();


const currentRouteName = computed(() => {
return route.name;
});


</script>


<template>
<div>
Using computed:\{\{currentRouteName}}
or without using computed: \{\{route.name}}
</div>
</template>