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

Question

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

我正在使用 NuxtJS (v2.11.0) 和 TypeScript，nuxt-属性-装饰器 包 (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 方法中使用 route 对象而不是 params。

Answer 2

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

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

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

Fetch query string value from URL with NuxtJS and AsyncData method

typescript

nuxt.js

asyncdata