如何在Nuxt.js中获取当前路由名称？

Question

我正在使用Nuxt.js构建静态网站。

如何在组件的script代码中访问当前显示的路由名称（我想避免从浏览器位置读取直接URL）？

我可以以某种方式访问​​$route.name吗？

Answer 1

是的，你可以使用vuejs路由对象，如$route.name或$route.path

$nuxt.$route.path

返回当前路径

$nuxt.$route.name

当前路线的名称（如果有）。

Route Object Properties

  

路由对象表示当前活动路由的状态。它   包含当前URL和路由记录的已解析信息   与URL匹配。

• $ route.path

  • type：string

  • 一个字符串，它等于当前路径的路径，始终被解析为绝对路径。例如＆＃34; /富/栏＆＃34;

• $ route.fullPath

  • type：string

  • 完整解析的网址，包括查询和哈希。

**

  

如果你想得到url params。像这样 ：      你这样做：

  data() {
    return {
       zone: this.$nuxt.$route.query.zone,
       jour: this.$nuxt.$route.query.jour

    }   },

**

Answer 2

另一种方法是使用以下任一方法：

• this.$route.path→http://localhost:3000上的示例，{{this.$route.path}}将打印/
• this.$route.name→以http://localhost:3000为例，{{this.$route.name}}将打印index

Answer 3

对于 Nuxt v2 useRouter composition API

<块引用>

import { computed, defineComponent, useRoute } from '@nuxtjs/composition-api'

export default defineComponent({
   setup() {
       const route = useRoute()
       const routeName = computed(() => route.value.name)
       return { routeName }
   },
})