Vue 路由器删除查询参数

Question

我正在使用 Nuxt2/Vue2，并且在生成网站时很难获取查询参数。

我通过使用 Contentful 中的条目在 nuxt 配置中创建我的网址，如下所示：

generate: {
  crawler: false,
  async routes() {
    const items = (
      await fetchEntriesByContentType({ contentType: "items" })
    ).map(entry => {
       const routes = {
         route: `/items/item/${entry.fields.slug}`,
         payload: entry,
       }
       return routes;
    });
   return items;
  }
}

如果我控制台日志尝试在 Nuxt 配置文件中进行调试，它将按预期返回带有参数的 url，例如/items/item/101?type=book

但是，如果我尝试使用 this.$route.path、this.$route.fullPath 或 this.$route.query 等在我的 Vue 组件中访问它，它在“？”之后永远不会返回任何内容。例如。对于上面的示例，它将始终是 /items/item/101

我需要在 nuxt 配置中添加一些内容来包含查询参数吗？ 我注意到，如果我单击 this.$route 转到定义，即使我没有安装 vue-router，它也会转到我的 node_modules 中的 vue-router 文件。这是导致问题的原因吗？

Answer 1

您不会在 map 回调中返回任何内容，假设必须返回routes，它应该是这样的：

const items = (
    await fetchEntriesByContentType({ contentType: "items" })
).map(entry => {
    const routes = {
        route: `/items/item/${entry.fields.slug}`,
        payload: entry,
    }
    return routes;
});