Vue Router的beforeEnter钩子如何传递多参数及报错排查

• 路由参数取值来源错误
  你配置的路径/services/category/web-details/:category/:id中的category、id属于**目标路由（routeTo）**的路径参数，你的代码从来源路由routeFrom.params中取值，只要来源路由没有携带这两个参数，取到的值就是undefined，传给fetchService的请求参数错误，自然无法拿到正确的service2返回值。
• 非法修改只读路由属性
  Vue Router 中的route.params是只读属性，不允许直接赋值修改，你给routeTo.params.service2赋值的操作本身不会生效，组件无法通过路由参数拿到这个值。
• 报错直接原因
  由于fetchService请求参数错误，返回的service2为undefined，组件渲染时尝试读取service2.category，就会抛出读取undefined属性的类型错误。

方案1：调整路由守卫逻辑 #

修正参数取值，将请求到的数据存在Vuex中，通过props传递给组件：

{
    path: "/services/category/web-details/:category/:id",
    name: "web-details",
    component: () => import("../views/services/category/WebDetails.vue"),
    // 用函数形式的props，把store中的数据也传给组件
    props: route => ({
      category: route.params.category,
      id: route.params.id,
      service2: store.state.service2
    }),
    beforeEnter(routeTo, routeFrom, next) {
      // 从目标路由取路径参数
      const { id, category } = routeTo.params
      store.dispatch('fetchService', { id, category } ).then(service2 => {
        // 将结果存在store中，不要直接修改route.params
        store.commit('saveService2', service2)
        next()
      }).catch(() => {
        // 补充错误处理，避免请求失败时组件无数据
        next('/404')
      })
    }
}

方案2：组件内发起请求（更推荐） #

把异步请求逻辑移到WebDetails.vue组件内部，降低路由守卫的复杂度，也更容易调试：

// WebDetails.vue 选项式API示例
export default {
  props: ['id', 'category'], // props: true 会自动把路由params转为组件props
  data() {
    return {
      service2: null
    }
  },
  created() {
    store.dispatch('fetchService', {
      id: this.id,
      category: this.category
    }).then(res => {
      this.service2 = res
    })
  }
}

内容的提问来源于stack exchange，提问作者azam