基于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时，这是非常完美的。

当我试图使用firebase函数运行它时：

$ firebase serve --only functions,hosting

静态路由运行良好，但是动态路由总是呈现默认的/页面，而不是执行动态页面。我该怎么解决这个问题？

Answer 1

如果使用nuxt generate，那么下面的解释应该有效。如果使用nuxt build，请看这回购，它是我为nuxt + firebase编写的一个模板。

生成说它跳过动态路由，除非您显式地指定了它们，因此出现了404个错误。在Nuxt配置文件中，要指定这些路由。下面是生成期间从数据库获取数据的一个示例。注意，在下面的示例中，doc是页面的段塞。

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只发生在页面刷新或从超链接直接跳转到页面时，则不需要重新部署CMS。