时间戳

首页 > 解决方案 > Firebase 上的 Nuxt 动态路由

javascript - Firebase 上的 Nuxt 动态路由

问题描述

我的 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.

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

$ firebase serve --only functions,hosting

静态路由完美运行，但动态路由总是呈现默认/页面，而不是执行动态页面。我该如何解决？

标签： javascriptfirebasegoogle-cloud-functionsnuxt.js

解决方案

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

推荐阅读