beforeRouteEnter를 사용하여 vuej에서 비동기 데이터를 올바르게 로드하는 방법은 무엇입니까?

beforeRouteEnter를 사용하여 vuej에서 비동기 데이터를 올바르게 로드하는 방법은 무엇입니까?

vue.js(및 vue-router)는 처음이라 페이지 컴포넌트를 초기화하는 데 필요한 비동기 데이터를 로드하는 방법을 찾고 있습니다.설명서에 따르면 다음과 같이 할 수 있습니다.beforeRouteEnter다음과 같습니다.

const Page = {
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.foo = {
        bar: 'blah'
      };
    })
  },
  data() {
    return {
        foo: null
    };
  },
  template: '<div>{{ foo.bar }}</div>'
};

foo를 올바르게 초기화하지 않으면 컴포넌트 렌더가 에러 원인과 함께 실패합니다.foo.bar는 초기화되기 전에 액세스 됩니다.네, 디폴트값을 지정함으로써 수정할 수 있습니다.foo다음 질문으로 이어집니다.

1. vue.js는 다음 콜백이 아직 실행되지 않았을 때 컴포넌트의 중간 상태를 렌더링할 수 있습니까?
2. 이것이 실제로 비동기 데이터를 로드하는 올바른 방법입니까, 아니면 다른 옵션을 고려해야 합니까?

비동기 부하라면 foo의 디폴트 설정으로 올바른 방향으로 가고 있다고 생각합니다.이 시점에서는 로드를 beforeRouteEnter에 넣든, 생성된 함수에 넣든 상관없습니다.

중간 상태를 표시하는 한 처음에는 'pageLoading' 변수만 사용합니다.그런 다음 v-if='pageLoading' {//filength spinner 또는 로드하는 동안 원하는 모든 것이 있습니다. v-filength {//filength page }이렇게 하면 비동기 로드가 발생하기 전에 네비게이션바 등 (if/else 외부에 있는 것)이 표시되므로 로드 중에 이상한 공백 페이지처럼 보이지 않습니다.

다음으로 비동기 로드 약속이 이행되면 pageLoading을 false로 설정합니다.

언급URL : https://stackoverflow.com/questions/52483415/how-to-properly-load-async-data-in-vuejs-with-beforerouteenter