使用 NuxtJS 和 AsyncData 方法从 URL 获取查询字符串值答案

【问题标题】：Fetch query string value from URL with NuxtJS and AsyncData method使用 NuxtJS 和 AsyncData 方法从 URL 获取查询字符串值
【发布时间】：2020-05-12 01:40:26
【问题描述】：

我尝试获取 URL 中 name 参数的值：http://fakelocalhost:3000/page?name=test

我正在使用 NuxtJS (v2.11.0) 和 TypeScript，以及 nuxt-property-decorator 包 (v2.5.0)。

但是，console.log(params.name) 得到一个未定义的结果。

这里是我的完整 TS 代码：

<script lang="ts">
  import {
    Component,
    Vue
  } from "nuxt-property-decorator";

  @Component({
    asyncData({ params  }) {
      console.log(params.name);
    }
  })
  export default class extends Vue {}
</script>

【问题讨论】：

标签： typescript nuxt.js asyncdata

【解决方案1】：

我找到了解决办法...

asyncData({ route }) {
   console.log(route.query.name);
}

在 asyncData 方法中使用 route 对象而不是 params。

【讨论】：

【解决方案2】：

您也可以使用上下文参数：查询 https://nuxtjs.org/docs/2.x/internals-glossary/context#query

asyncData({ query }) {
   console.log(query.name);
}

【讨论】：