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