如何在 Nuxt 2 和 3 中获取当前路由名称？

Question

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

如何在组件的

script

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

我能以某种方式访问

$route.name

吗？

Answer 1

是的，您可以使用 vuejs 路由对象，例如

$route.name

或

$route.path

$nuxt.$route.path

返回电流路径

$nuxt.$route.name

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

路由对象属性

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

• $route.path

  • 类型：字符串

  • 等于当前路由路径的字符串，始终解析为绝对路径。例如“/foo/bar”.

• $route.fullPath

  • 类型：字符串

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

**

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

  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

使用 Nuxt3 和 Composition API，你可以用这个实现它

<script setup>
const route = useRoute()
console.log('current name', route.name)
</script>

或者使用 Options API

<script>
export default {
  mounted () {
    console.log('current name', this.$route.name)
  },
}
</script>

如我之前的回答所示：https://stackoverflow.com/a/72212136/8816585

Answer 4

对于 Nuxt 3

export default ({
   setup () {
    const route = useRoute()
    return {
      route
    }
  }
})

在模板之后

{{ route.name }}

Answer 5

for Nuxt v2

useRouter

组合API

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

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

Answer 6

对于 Nuxt 3，您可以使用路由器的 currentRoute。

const { currentRoute } = useRouter();
const routeName = currentRoute.value.name;