Question

SSR无法使用 NuxtJS 中的动态路由（_id.vue文件），我正在使用 asyncData 函数在服务器端呈现数据库中的动态值，它可以在开发人员模式下工作，但是在生成静态项目后，服务器端不会呈现任何内容，包括具有静态值的HTML标记。

_id.vue

<template>
  <v-app>
            <h3 class="typo-title3">Localização</h3>
            <p
              class="address"
            >{{data.nome | capitalize}} está localizado no bairro {{data.bairro | capitalize}}, {{data.rua | capitalize}}, {{data.num}}, na cidade de {{data.cidade | capitalize}}.</p>
  </v-app>
</template>

<script>
import fsAct from "@/functions/fsAct";
import firebase from "~/assets/js/firebase";

export default {
  mixins: [fsAct],
  data() {
    return {
      id: this.$route.params.id,
      data: {
        fachada: ""
      }
    };
  },
  /* SSR */
  async asyncData({ route, params }) {
    const ref = firebase
      .firestore()
      .collection("example")
      .doc(params.id);
    let snap;
    try {
      snap = await ref.get();
    } catch (e) {
      console.error(e);
    }
    const prefix =
      "https://firebasestorage.googleapis.com/v0/b/easyhouse-am.appspot.com/o/";
    let dados = snap.data();
    dados.fachada = prefix + dados.fachada.replace("/", "%2F") + "?alt=media";
    return {
      data: dados
    };
  },
  created() {
    this.fsSelectOne("example", this.id).then(res => {
      this.data = res.data();
    });
  }
};
</script>

Answer 1

如果您正在做nuxt generate，那么它将在没有服务器的情况下构建静态页面。因此，您甚至没有服务器来调用异步数据方法。

访问页面时，将在客户端调用此方法。

如果您仅在构建静态网站，则应使用生命周期方法beforeCreate。

NuxtJS动态路由SSR

1 个答案: