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

Question

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

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

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

原文由 lukaszkups 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

    }   },

**

原文由 Mohammad Fanni 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

原文由 Billal Begueradj 发布，翻译遵循 CC BY-SA 4.0 许可协议