javascript - 用于页面路由器的 vue-spinner

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网站)。

问题:我如何制作 vue 网站加载器以及如何在从一个页面移动到另一个页面时制作加载器(vue-spinner)(例如 NProgress.start() & NProgress.done() )?

Answer 1

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