NuxtJS 动态路由 SSR答案

【问题标题】：NuxtJS Dynamic Routes SSRNuxtJS 动态路由 SSR
【发布时间】：2020-01-31 01:49:11
【问题描述】：

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>

【问题讨论】：

你解决了吗？

标签： vue.js nuxt.js server-side-rendering

【解决方案1】：

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

这将在访问页面时在客户端调用。

如果你只是建立静态网站，你应该使用生命周期方法beforeCreate。

【讨论】：