Enter() 경로 가드 앞에서 사용할 때 필요한 소품이 누락됨

Enter() 경로 가드 앞에서 사용할 때 필요한 소품이 누락됨

다음을 사용하여 API에서 데이터를 가져오려고 합니다.beforeEnter()경로 경비원인데 오류가 발생했습니다.

Missing required prop: "rides"

여기 제 코드가 있습니다.

router.js

{
   path: '/',
   name: 'home',
   component: () => import('./components/main.vue'),
   props: true,
   beforeEnter(to, from, next) {
     store.dispatch('ride/fetchRides').then(rides => {
       to.params.rides = rides
       next()
     })
   }
}

작업.js

fetchRides({ commit, dispatch }) {
    return statistcsService.ridesForCurrentWeek()
      .then(response => {
        commit('SET_RIDES', response.data)
        return response.data
      })
      .catch(error => {
        const notification = {
          type: 'danger',
          message: 'There was a problem fetching your rides'
        }
        dispatch('notification/add', notification, { root: true })
        throw error
      })
  }

인덱스.vue

<script>
    export default {
      props: {
        rides: {
          type: Array,
          required: true
        }
      }
    ...
  }
</script>

제가 무엇을 빠뜨리고 있나요?소품이 부품에 세팅되어 있는데 왜 우는지 모르겠어요.저는 API 응답에서 100% 데이터를 받고 있다는 것을 확인했습니다.

추가하는 것을 잊었습니다.rides해당 구성 요소에 대한 HTML 코드의 속성입니다.오류 메시지에 따르면 - 그것이 문제입니다.

예:

<component :rides="rides"></component>

언급URL : https://stackoverflow.com/questions/54383399/missing-requried-props-when-using-beforeenter-route-guard