页面路由器的 vue-spinner

Question

我使用vue-spinner并且我有一个关于 codeandbox的项目。

主页是 Home.vue 与其他组件的链接：

 <router-link to="/">Home</router-link>
 <router-link to="/helloworld">Hello World</router-link>
 <router-link to="/bigimg">Big Img</router-link>

主要.js：

import Vue from "vue";
import App from "./App";

import router from "./router";

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: "#app",
  router,
  components: { App },
  template: "<App/>"
});

router.beforeEach((to, from, next) => {
  //loading = true;
  next();
});

我想在fishtripr.com网站（vue网站）上制作加载器。

问题：我如何制作 vue 网站加载器以及如何在从页面移动到页面时制作加载器（vue-spinner）（如NProgress.start()和NProgress.done( ) ）？

Answer 1

在我看来，最好的方法是将数据属性loading设置为true （您可以使用 mixin 执行此操作），然后一旦服务器响应实际数据，您就可以通过设置this.loading = false关闭加载程序。 我认为您不能将此逻辑放在全局router.beforeEach因为它无法访问该组件。 您需要将逻辑放在beforeRouteUpdate实例中，我认为这并不理想。

Answer 2

您需要混合使用router.beforeEach和 Justin 提到的手动更新变量。 在这种情况下，像 vuex 这样的东西可能是有意义的，因为许多组件将更改数据。

在你的 vuex 商店

  mutations: {
    resetLoading(state){
      state.isLoading = true
    },

    // This needs to be called on each component individually
    finishedLoading(state){
      state.isLoading = false
    },
    ..

像这样的路由器

router.beforeEach((to, from, next) => {
  store.commit("resetLoading")
  next()
})

然后在你的组件中

  ..
  created(){
    var self = this
    this.$store.dispatch("fetchData").then(function(){
      self.$store.commit("finishedLoading")
    })
  },
  ..