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

Question

我尝试获取 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>

Answer 1

我找到了解决方案...

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

在asyncData方法中使用路由对象而不是参数。

Answer 2

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

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