페이지 라우터용 vue-properner

페이지 라우터용 vue-properner

나는 부에 스피너를 사용하고 코드와 박스에 대한 프로젝트가 있다.

메인 페이지는 홈이다.다른 구성 요소에 대한 링크가 있는 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() )?

내 생각에 가장 좋은 방법은 데이터 속성을 갖는 것이다.loading하기로 되어 있는true(혼합으로 이 작업을 수행할 수 있음) 서버가 실제 데이터로 응답한 후 로더를 설정하여 해제하십시오.this.loading = false. 이런 논리를 지구촌에 집어넣을 수는 없을 것 같다.router.beforeEach구성 요소에 대한 액세스 권한이 없기 때문에이 경우 논리를 적용해야 한다.beforeRouteUpdate이상적이라고 생각하진 않지만

너는 혼용할 필요가 있다.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")
    })
  },
  ..

참조URL: https://stackoverflow.com/questions/52568186/vue-spinner-for-page-router