Vue.js 在提供dist后，单击页眉中的routes可使用prerender spa插件刷新vuejs中的页面

组件之间的连接中断。这不应该发生，因为我使用的是bootstrap vue内置路由器链接（使用to=“”而不是href=“”）。 该应用程序在没有dist的情况下运行时效果非常好

---

App.vue

---

---

路由器/index.js

---

从“Vue”导入Vue 从“vue路由器”导入VueRouter 从“../views/Home.vue”导入主页

Vue.use（VueRouter）

常数路由=[ { 路径：“/”， 姓名：'家'， 组成部分：家庭 }, { 路径：'/stocks'， 名称:"股票",， 组件：（）=>导入（/“../views/Stocks.vue”） }, { 路径：'/portfolio'， 名称：'投资组合'， 组件：（）=>导入（“../views/Portfolio.vue”） } ]

常量路由器=新的VueRouter({ 模式：“历史”， base:process.env.base\u URL， 路线 })

---

导出默认路由器

我在写这篇文章一分钟后就想到了，哈哈

问题是，在App.vue中，我的主div的类为“container”，而不是id为“App”

更正如下：

    <template>
      <div id="app"> //correction here
        <app-header></app-header>
        <div class="row">
          <div class="col-xs-12">
            <transition name="slide" mode="out-in">
              <router-view></router-view>
            </transition>
          </div>
        </div>
      </div>
    </template>

//这里更正

<template>
  <div>
    <b-navbar toggleable="lg" type="dark" variant="info">
      <b-navbar-brand to="/">Stock Broker</b-navbar-brand>

      <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

      <b-collapse id="nav-collapse" is-nav>
        <b-navbar-nav>
          <b-nav-item to="/portfolio">Portfolio</b-nav-item>
          <b-nav-item to="/stocks">Stocks</b-nav-item>
          <b-nav-item @click="endDay">End Day</b-nav-item>
          <b-navbar-nav right>
            <b-nav-item right>Funds: {{ funds }}</b-nav-item>
          </b-navbar-nav>
        </b-navbar-nav>
      </b-collapse>
    </b-navbar>
  </div>
</template>

<script>
import { mapActions } from "vuex";

export default {
  data() {
    return {
      isDropdownOpen: false
    };
  },
  computed: {
    funds() {
      return this.$store.getters.funds;
    }
  },
  methods: {
    ...mapActions({
      randomizeStocks: "randomizeStocks",
      fetchData: "loadData"
    }),
    endDay() {
      this.randomizeStocks();
    },
    saveData() {
      const data = {
        funds: this.$store.getters.funds,
        stockPortfolio: this.$store.getters.stockPortfolio,
        stocks: this.$store.getters.stocks
      };
      this.$http.put("data.json", data);
    },
    loadData() {
      this.fetchData();
    }
  }
};
</script>

module.exports = {
  pluginOptions: {
    prerenderSpa: {
      registry: undefined,
      renderRoutes: ["/", "/portfolio", "/stocks"],
      useRenderEvent: true,
      headless: true,
      onlyProduction: true
    }
  }
};

    <template>
      <div id="app"> //correction here
        <app-header></app-header>
        <div class="row">
          <div class="col-xs-12">
            <transition name="slide" mode="out-in">
              <router-view></router-view>
            </transition>
          </div>
        </div>
      </div>
    </template>