Firebase 上的 Nuxt 動態路由

Question

我的 Nuxt.js 應用程序具有以下結構：

/pages/index.vue
/pages/_slug/index.vue

當用戶獲取/{any_page} ，它將使用路徑來構建頁面內容：

/pages/_slug/index.vue

<template>
  <div>
    {{slug}}
  </div>
</template>

<script>
import fetch from 'isomorphic-fetch';
export default {
  async asyncData({ params }) {
    return { slug: params.slug } 
  }
}
</script>

這在通過yarn dev直接運行 Nuxt App 時非常有效。

當我嘗試使用 firebase 函數運行它時：

$ firebase serve --only functions,hosting

靜態路由完美運行，但動態路由總是呈現默認/頁面，而不是執行動態路由。 我該如何解決？

Answer 1

如果使用nuxt generate ，那么下面的解釋應該有效。 如果使用nuxt build ，請查看此repo，它是我為 nuxt + firebase 作為 ssr 編寫的模板。

Generate表示它會跳過動態路由，除非您明確指定它們，因此會出現 404 錯誤。 在您的 Nuxt 配置文件中，您希望指定這些路由。 這是在生成期間從數據庫中獲取的示例。 請注意，在我下面的示例中，文檔 ID 是頁面的 slug。

nuxt.config.js

generate: {
    async routes() {
      const { db } = require('./services/fireInit');
      const qs = await db.collection('recipes').get();
      return qs.docs.map(x => `/recipes/${x.id}`);
    }
  },

這種方法的缺點是，當您通過 CMS 添加新項目時，如果您希望能夠在沒有 404 的情況下使用這些新鏈接，則每次都需要重建/部署您的站點。如果您導航到新內容“有機”...404 僅在頁面刷新或從超鏈接直接跳轉到頁面時發生。