vue路由间的传参params和query

query方式传参及接收

示例一

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

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

<router-link
  tag="li"
  v-for="item of insuranceClassifyData"
  :key="item.cargoCategoryId"
  :to="{ 
    path: '/placeOrderInsuranceClassify', 
    query: { 
      cargoCategoryId: `${item.cargoCategoryId}` , 
      cargoCategoryName: `${item.cargoCategoryName}`
    } 
  }"
></router-link>

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

params方式传参及接收

示例一

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

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

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

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

<router-link
  tag="li"
  v-for="item of insuranceClassifyData"
  :key="item.cargoCategoryId"
  :to="'/placeOrderInsuranceClassify'+`/${item.cargoCategoryId}`+`/${item.cargoCategoryName}`"
></router-link>

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

示例二

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

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

<router-link
  tag="li"
  v-for="item of insuranceClassifyData"
  :key="item.cargoCategoryId"
  :to="{
    name:'createOrder',
    params: { 
      cargoCategoryId: `${item.cargoCategoryId}` , 
      cargoCategoryName: `${item.cargoCategoryName}`
    } 
  }"
></router-link>

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

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

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