使用beforeEnter（）路由防护器

Question

我正在尝试使用beforeEnter()路由防护从API提取数据，但是出现错误：

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()
     })
   }
}

actions.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
      })
  }

Index.vue

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

我想念什么？该道具设置在组件中，所以我不确定为什么会哭。 我已经证实100％的人是从API响应中获取数据的。

Answer 1

您忘记在该组件的html代码中添加rides属性。根据错误消息-这就是问题所在。

示例：

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