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 仅在页面刷新或从超链接直接跳转到页面时发生。