NuxtJS 动态路由 SSR

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

NuxtJS Dynamic Routes SSR

vue.js

server-side-rendering

nuxt.js