如何在Nuxt2和3页面中获取路由URL参数？

Question

我正在使用Nuxt.js，并且有一个在

<nuxt-link>

标签下定义的动态页面。

pages/post/_slug.vue

因此，当我访问页面网址时，例如http://localhost:3000/post/hello-world，我该如何在我的页面内读取这个slug参数的值。

目前我是通过以下方式使用asyncData获取它：

  asyncData ({ params }) {
    // called every time before loading the component
    return {
      slug: params.slug
    }
  }

这在工作上是没有问题的，但我认为这不是最好的方法，应该有更好的方式让参数对页面可用。非常感谢任何帮助！

这在工作上是没有问题的，但我认为这不是最好的方法，应该有更好的方式让参数对页面可用。非常感谢任何帮助！

- asanas

---

你能告诉我你想用参数做什么吗？ - KitKit

我使用这个参数从API中查询和获取一些数据。 - asanas

那么我认为你的方式是最好的方式！ - KitKit

好的，谢谢！我会继续使用这种方法，直到我们找到更好的方法 :) - asanas

Answer 1

注意：本答案适用于Vue2和Nuxt2。如果您正在寻找nuxt3或vue3的答案，请参考其他答案。

在.vue文件中，要获取Vue路由器route对象：

this.$route

请注意Vue路由器在this.$router对象下方。

$route对象具有一些有用的属性：

{
  fullpath: string,
  params: {
    [params_name]: string
  },
  //fullpath without query
  path: string
  //all the things after ? in url
  query: {
    [query_name]: string
  }
}

您可以像这样使用$route对象：

    <script>
    export default {
      mounted() {
        console.log(this.$route.fullPath);
      }
    };
    </script>

URL路径参数位于route.params下，例如您的情况下为route.params.slug

    <script>
    export default {
      mounted() {
        console.log(this.$route.params.slug);
      }
    };
    </script>

Vue的mounted钩子仅在客户端运行，当您想在服务器上获取参数时，可以使用asyncData方法：

    <script>
    export default {
        asyncData({route, params}) {
            if (process.server) {
                //use route object
                console.log(route.params.slug)
                //directly use params
                console.log(params.slug)
            }
        }
    };
    </script>

但是，请注意：

它将在首次请求Nuxt应用程序时被称为服务器端，并在导航到其他路由时被称为客户端。 ref

如果您不需要在服务器上使用params信息，例如您不需要基于params获取数据，则我认为mounted钩子足以满足要求。

- Franci

---

参数不正确，应该是查询。 - Pencilcheck

Answer 2

为了从 URL 中读取参数，你可以在 Nuxt 中使用以下方式：

``` this.$route.query. ```

例如：

URL: `https://example.com/example/?token=QWERTYUASDFGH`

使用这行代码，你可以读取 `token` 参数：

``` this.$route.query.token ```

并且会返回 `QWERTYUASDFGH`。

- Iman Shafiei

---

查询是在nuxtjs中对我来说正确的答案。 - Pencilcheck

如果我理解不对，请纠正我，params！= query。example.com/post/{id}将是参数，而example.com/post?id=123将是查询。 - Ari

Answer 3

随着Nuxt3稳定版本的发布，我想使用组合式API更新答案。这是您在任何.vue文件中访问当前路由所有有趣部分的方法。

<script setup>
const route = useRoute()
</script>

<template>
  <pre>{{ route }}</pre>
</template>

route 在访问 http://localhost:5678/about?fruit=watermelon 时会得到以下结果

{
  "path": "/about",
  "name": "about",
  "params": {},
  "query": {
    "fruit": "watermelon"
  },
  "hash": "",
  "fullPath": "/about?fruit=watermelon",
  "matched": [
    {
      "path": "/about",
      "name": "about",
      "meta": {},
      "props": {
        "default": false
      },
      "children": [],
      "instances": {},
      "leaveGuards": {
        "Set(0)": []
      },
      "updateGuards": {
        "Set(0)": []
      },
      "enterCallbacks": {},
      "components": {
        "default": {
          "__hmrId": "0a606064",
          "__file": "/home/kissu/code/test/n3-default/pages/about.vue"
        }
      }
    }
  ],
  "meta": {}
}

如果您使用Vue开发者工具，您还可以通过控制台点击组件并找到实例（有助于快速检查对象）。它的细节比Routes标签多一些。

更多信息可在此处查看：https://v3.nuxtjs.org/api/composables/use-route#useroute

---

使用Options API，代码如下（控制台输出）：

<script>
export default {
  mounted () {
    console.log('route object', this.$.appContext.app.$nuxt._route.query)
  },
}
</script>

PS：也许有一种我还不知道的更短的方法。

PS2：我总是混淆查询参数和"路由参数"，因此this memento可以帮助了解它们之间的区别。

- kissu

Answer 4

您可以访问路由参数以进行全局使用，但这并不是好的做法：

window.$nuxt._route.params

对于页面/组件/布局等的本地使用，我们应始终像以下示例一样实践：

this.$route

或者

this.$nuxt._route.params

- Mahamudul Hasan

---

这似乎是一种非常糟糕的做法，因为它从未在nuxt js文档中提到过！ - Shadow_m2

$nuxt.$route是有文档记录的。 - Vasyl Boroviak

Answer 5

如果您在商店环境中（例如actions.js），可以像这样访问查询参数：

this.$router.currentRoute.query['param_name']

- nyagolova

---

这对我很有帮助，谢谢。但最好使用this.$router.currentRoute.params.param_name。 - fdrv

查询参数不是路径变量。在这里，OP正在寻找“路径变量”参数。是的，这个有点难以理解。 - kissu

Answer 6

其他回答已经足够了，如果你想在apollo智能查询中访问路由信息：最初的回答。

  apollo: {
    items: {
      query: jobsBy,
      variables() {
        return {
          clientId: this.$route.query.id
        }
      },
    }
  }

- bob

Answer 7

声明动态路由
在nuxt2中，下划线_用于动态路由，在nuxt3中，动态路由现在使用方括号[]

访问参数
在nuxt2中，路由参数可以通过$route对象访问
例如：this.$route.params
在nuxt3中，参数可以从useRoute组合式中解构出来
例如：const { params } = useRoute()

- krypton

Answer 8

据我所知，这已经是最好的方式，如果不是唯一的方式了。但我可以建议一个稍微不同的方法，也许适合您的需求。使用 asyncData 方法从服务器检索数据，而不是将参数放在您的 VM 中并稍后处理, 如果适用的话。然后，您可以在演示逻辑中处理结果数据，而不是任何类型的请求。另一方面，如果您不想将任何内容传递给 VM 或根据您的需求使用中间件，也可以使用 fetch。

- monk

Answer 9

对我来说，最好的方法是：

async asyncData(context){
      const query_params=context.route.query;
}

- gpasse