Question

我使用vue-spinner，我有一个project on codesandbox。

主页是Home.vue，具有其他组件上的链接：

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

main.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网站）上制作加载程序。

问题：：如何在页面之间移动（例如NProgress.start()和NProgress.done(时，如何制作vue网站加载程序以及如何制作加载程序（vue旋转程序））？

Answer 1

您需要混合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")
    })
  },
  ..

Answer 2

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

页面路由器的vue-spinner

2 个答案: