라우터 이동 시 데이터 가져오기

1. component 랜더링 완료 후

라우터 이동  시 params 값을 체크하여 데이터를 가져오는 방식으로 아래와 같이 watch를 사용하여 component가 랜더링 완료 후 가져오는 방식이 있습니다.  데이터 로드가 느리거나 로딩 이미지가 필요할 때 사용 

created() {
  // 컴포넌트 생성시 데이터를 패치한다
  this.fetchData()
  },
  watch: {
    '$route': 'fetchData'
  },
  methods: {
    fetchData () {
      this.loading = true
      db.collection('user').where('ep_id', '==', this.$route.params.employee_id).get()
        .then(querySnapshop => {
          querySnapshop.forEach(doc => {
            this.loading = false
            this.user.ep_id = doc.data().ep_id
            this.user.name = doc.data().name
            this.user.age = doc.data().age            
            console.log(doc.data().ep_id)
            console.log('method:view')
          })
        })
    }

 

 

2. component 랜더링 완료 전

beforeRouteEnter를 사용 component 랜더링 전에 데이터를 가져올 수 있습니다. 랜더링 이전이기 때문에 this, $el을 사용할 수 없기때문에 next 콜백 할 수를 사용하여 vm 매개변수를 사용하여  현재 변수에 접근할 수 있습니다.  해당 방식은 데이터 로딩 딜레이가 없을 경우 사용할 경우 사용자가 데이터 접근 환경이 좋아질 것으로 보여집니다.

beforeRouteEnter (to, from, next) {
    db.collection('user').where('ep_id', '==', to.params.employee_id).get()
      .then(querySnapshop => {
        querySnapshop.forEach(doc => {
          next(vm => {
            vm.user.ep_id = doc.data().ep_id
            vm.user.name = doc.data().name
            vm.user.age = doc.data().age
            console.log(vm.user.ep_id = doc.data().ep_id)
          })
          // console.log(doc.data())
        })
      })
    // console.log(to.params.employee_id)
  }