vue路由间的传参params和query

query方式传参及接收

示例一

query方式的传参，url看下图:

http://localhost:8848/#/placeOrderInsuranceClassify?cargoCategoryId=1&cargoCategoryName='鲜货类'

在页面新加载的时候，可以通过this.$route.query获取到传过来的路由参数，既可进行设置和使用
console.log(this.$route.query)

params方式传参及接收

示例一

params方式的传参，也叫命名路由，url看下图:

http://localhost:8848/#/placeOrderInsuranceClassify/1/鲜货类

定义路由：在定义path路由路径时定义参数名和格式，如 path: "login/:num"

{
  path: '/placeOrderInsuranceClassify/:cargoCategoryId/:cargoCategoryName',
  ...
}

在页面新加载的时候，可以通过this.$route.params获取到传过来的路由参数，既可进行设置和使用
console.log(this.$route.params)

示例二

params传参（url中不显示参数），定义路由时添加name属性给映射的路径取一个别名。

{
  path: '/placeOrderInsuranceClassify',
  name: 'createOrder'
  ...
}

在页面新加载的时候，可以通过this.$route.params获取到传过来的路由参数，既可进行设置和使用
console.log(this.$route.params)

注意：利用params不显示url传参的方式会导致在刷新页面的时候，传递的值会丢失。

总结：如果点击浏览器的返回按钮，想要实现从子路由返回上级路由。若传参方式为params的话好像不能成功，我忘记了。个人比较喜欢使用query方式的传参