使用 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>

使用 beforeEnter() 路线守卫时缺少必需的道具

Missing requried props when using beforeEnter() route guard

vue.js

vue-router

vuex

router.js

actions.js

Index.vue