Vue通过router-link向Book组件传参报错，该如何排查错误？

你的代码存在3处核心错误，按以下步骤修改即可正常运行：

• 错误1：router-link的to属性不支持直接传递props字段，所有路由跳转参数都需要放在params配置项中
  修正后的router-link写法：

  <router-link :to="{ name: 'Book', params: { id: book.id, data: data.attributes } }">跳转至书籍页</router-link>
  

• 错误2：Book.vue中id属性的类型定义与实际传入值不匹配，路由路径参数:id默认传入类型为字符串/数字，同时你需要新增data属性用来接收传递的自定义数据
  修正后的Book.vue代码：

  export default {
    props: {
      id: {
        // 可根据你的实际book.id类型调整，比如仅保留Number或者String
        type: [Number, String],
        required: true
      },
      data: {
        type: Object,
        required: true
      }
    }
  }
  

• 现有router/index.js的配置props: true无需修改，该配置会自动将路由params中的所有参数映射为对应组件的props属性。

补充注意事项 #

如果需要页面刷新后参数不丢失，可将非路径参数转成JSON字符串放到query中传递，避免params非路径参数刷新丢失的问题。

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