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獲取到傳過來的路由參數(shù)，既可進行設置和使用
console.log(this.$route.query)

params方式傳參及接收

示例一

params方式的傳參寨典，也叫命名路由，url看下圖:

http://localhost:8848/#/placeOrderInsuranceClassify/1/鮮貨類

定義路由：在定義path路由路徑時定義參數(shù)名和格式想虎，如 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獲取到傳過來的路由參數(shù)，既可進行設置和使用
console.log(this.$route.params)

示例二

params傳參（url中不顯示參數(shù)）舌厨，定義路由時添加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獲取到傳過來的路由參數(shù)裙椭，既可進行設置和使用
console.log(this.$route.params)

注意：利用params不顯示url傳參的方式會導致在刷新頁面的時候躏哩，傳遞的值會丟失。

總結：如果點擊瀏覽器的返回按鈕揉燃，想要實現(xiàn)從子路由返回上級路由扫尺。若傳參方式為params的話好像不能成功，我忘記了炊汤。個人比較喜歡使用query方式的傳參