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

Question

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

下定义的动态页面

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
    }
  }

这工作正常，但我认为这不是最好的方法，应该有更好的方法使参数可用于页面。任何帮助表示赞赏！

Answer 1

适用于 Vue2 和 Nuxt2

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

this.$route

（注意 Vue router 位于

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 moted hook 仅在客户端运行，当您想在服务器上获取参数时，可以使用 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 应用程序的第一个请求时），在导航到其他路线时在客户端调用。 参考

如果你不需要服务器上的参数信息，就像你不需要根据服务器端的参数获取数据一样，我认为安装的钩子就足够了。

Answer 2

要从 URL 读取参数，你应该在 Nuxt 中使用这种方式：

this.$route.query.<name_of_your_parameter_in_url>

例如

网址：

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

通过这行代码，您可以阅读

token

：

this.$route.query.token

并给你

QWERTYUASDFGH

。

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：我总是对

query params

和

"route params"

感到困惑，因此 这个差异纪念品 可能很有用。

Answer 4

您可以轻松访问路由参数

适合全球使用，但这不是一个好的做法：

窗口.$nuxt._route.params

对于页面/组件/布局等下的本地使用，我们总是应该像下面这样练习

这个.$路线

或

这个.$nuxt._route.params

Answer 5

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

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

Answer 6

其他答案已经足够了，如果你想在

apollo

智能查询中访问路线信息：

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

Answer 7

声明动态路由
在nuxt2中，下划线

_

用于动态路由，在nuxt3中，而不是 下划线

_

动态路由现在使用方括号

[]

访问参数
在 nuxt2 中，可以在

$route

对象
上访问路由参数 例如

this.$route.params

在 nuxt3 中，参数可以从

useRoute

可组合
解构 例如

const { params } = useRoute()

Answer 8

据我所知，这已经是最好的方法，即使不是唯一的方法。但我可以建议一种稍微不同的方法，也许适合您的需求。 使用

asyncData

方法从服务器检索数据，而不是在虚拟机中放置参数并稍后处理（如果是您的情况）。然后，您可以在表示逻辑处处理 result 数据，而不是任何类型的数据请求。另一方面，如果您不想将任何内容传递给 VM，也可以使用 fetch，或者根据您的需要使用 middleware。

Answer 9

对我来说最好的方法是：

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