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

【问题标题】：How to get current route name in Nuxt.js?如何在 Nuxt.js 中获取当前路由名称？
【发布时间】：2017-11-28 15:15:40
【问题描述】：

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

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

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

【问题讨论】：

是的，你应该可以像this.$route.name这样的方式在组件中访问它

标签： vue.js vuejs2 vue-component vue-router nuxt.js

【解决方案1】：

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

$nuxt.$route.path

返回当前路径

$nuxt.$route.name

当前路线的名称，如果有的话。

Route Object Properties

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

$route.path
- 类型：字符串
- 等于当前路由路径的字符串，始终解析为绝对路径。例如“/foo/bar”。
$route.fullPath
- 类型：字符串
- 完整解析的 URL，包括查询和哈希。

如果你想获取 url 参数。像这样：你这样做：

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

    }   },

【讨论】：

我的网址在井号后包含一些字符。 # /my/url/#somemore only /my/url/ is returned

【解决方案2】：

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

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

【讨论】：

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

【讨论】：