뷰 라우터 beforeRouteEnter 뷰 - 자원 요청

Question

나는 경로를 입력하기 전에 요청을 위해 참고로이 링크를 사용했다 : https://router.vuejs.org/en/advanced/data-fetching.html

import Vue from 'vue' 
import VueResource from 'vue-resource' 
Vue.use(VueResource) 

function getCities() { 
    return Vue.http({ 
    method: 'GET', 
    url: process.env.base_url + 'cities' 
    }) 
} 

export default { 
    data() { 
    return { 
     cities: [] 
    } 
    }, 

    beforeRouteEnter (to, from, next) { 
    getCities((err, cities) => { 
     if (err) { 
     next(false) 
     } else { 
     next(vm => { 
      vm.cities = cities.data 
     }) 
     } 
    }) 
    }, 

    watch: { 
    $route() { 
     this.cities = [] 

     getCities((err, cities) => { 
     if (err) { 
      this.error = err.toString() 
     } else { 
      this.cities = cities.data 
     } 
     }) 
    } 
    } 

나를 위해 작동하지 않는 것 그러나. 이 코드를 테스트 한 결과 요청이 성공적으로 이루어졌습니다. 그러나 결과는 반환되지 않습니다. 현재 요청 자체가 함수에서 반환되고 있지만 beforeRouteEnter 콜백에 표시 할 수는 없습니다.이 콜백은 watch $ 라우트 섹션이나 vm.cities에 할당하지 않아야합니다.

도움이나 의견을 부탁드립니다.

Answer 1

Vue.http 방법은 약속을 반환하므로 코드를 읽어야합니다

beforeRouteEnter (to, from, next) { 
    getCities().then(response => { 
    next(vm => vm.cities = response.body) 
    } 
}