vue-router 路由傳參的幾種方式，刷新頁面參數丟失

常見場景：點擊列表詳情，跳轉到詳情內頁，傳遞id參數獲取詳情數據。

我們先來看看路由跳轉的幾種方式：

1、通過params方式傳參

通過$route.push的path攜帶參數方式

// 路由配置
{ 
   path: '/detail/:id',  //若id後面加?代表這個參數是可選的，即使不傳id也不會導致頁面無法訪問
   name: 'detail', 
   component: Detail 
}

// 列表中跳轉
this.$router.push({
   path:`/detail/${id}` 
})

// 詳情頁獲取參數
this.$route.params.id

注意：這種方式參數是以/id跟在url後，刷新頁面後參數不會丟失。

通過$route.push的params傳參

// 列表中跳轉
this.$router.push({
   name:'detail',
   params:{
       id:id     
   }
})

// 詳情頁獲取參數
this.$route.params.id

注意：這種方式的傳參，必須使用name進行跳轉，未在路由配置:id，url後不會顯示id，刷新頁面後參數會丟失。

2、通過query方式傳參

// 路由配置
{ 
    path: '/detail',
    name: 'detail', 
    component: Detail 
}

// 列表中跳轉
this.$router.push({
   path:'/detail',
   query:{
       id:id
   }
})

// 詳情頁獲取參數
this.$route.query.id

注意：這種方式的參數以?id跟在url後，類似get傳參，並且，query必須使用path進行傳參。刷新頁面後參數不會丟失。

傳遞的參數是對象或數組

還有一種情況就是，如果通過query方式傳遞的是對象或數組，在地址欄中會被強制轉換成[object Object]，刷新後頁獲取不到對象值。

那麼我們可以通過JSON.stringify()方法將參數轉換為字符串，在獲取參數時通過JSON.parse轉換成對象。

let parObj = JSON.stringify(obj)
// 路由跳轉
this.$router.push({
   path:'/detail',
   query:{
       obj:parObj
   }
})

// 詳情頁獲取參數
JSON.parse(this.$route.query.obj)

注意：這樣雖然可以傳對象，但是如果數據多的話地址欄會很長(不太推薦)。

3、使用props配合組件路由解耦

// 路由配置
{
   path:'/detail/:id',
   name:'detail',
   component:Detail,
   props:true             // 如果props設置為true，$route.params將被設置為組件屬性  
}

// 路由跳轉
this.$router.push({
   path:`/detail/${id}`
})

// 詳情頁獲取參數
export default {
  props:['id'],      // 將路由中傳遞的參數id解耦到組件的props屬性上
  mounted(){
    console.log("id",this.id);  
  }
}
// 路由配置
{
   path:'/detail',
   name:'detail',
   component:Detail,
   props:true             // 如果props設置為true，$route.params將被設置為組件屬性  
}

// 路由跳轉
this.$router.push({
   name:'detail',
   params:{
       order:{
         id:'123456789',
         name:'商品名稱'  
       }
   }
})

// 詳情頁獲取參數
export default {
  props:['order'],      // 將路由中傳遞的參數order解耦到組件的props屬性上
  mounted(){
    console.log("order",this.order);  
  }
}

注意：路由配置中指定參數:id的，頁面刷新後參數不會丟失，在路由配置未指定參數的，使用params跳轉傳參，頁面刷新後參數會丟失。

此外，數據量比較大的參數，可以使用sessionStorage或localStorage來進行存儲參數來解決頁面刷新參數丟失的問題，具體結合實際項目即可。

Tags:

VirMach 便宜 VPS

QNews

QNews