路由傳參的三種方法

項目中很多情況下都需要進行路由之間的傳值，想過很多種方式

sessionstorage/localstorage/cookie 進行離線緩存存儲也可以，用vuex也可以，不過有些大材小用吧，不管怎么說因場景而異

下面我來說下vue自帶的路由傳參的三種基本方式

先有如下場景 點擊當前頁的某個按鈕跳轉到另外一個頁面去，並將某個值帶過去

<div class="examine" @click="insurance(2)">查看詳情</div> 

第一種方法 頁面刷新數據不會丟失

methods：{ insurance(id) { //直接調用$router.push 實現攜帶參數的跳轉 this.$router.push({ path: `/particulars/${id}`, }) } 

需要對應路由配置如下：

{ path: '/particulars/:id', name: 'particulars', component: particulars } 

可以看出需要在path中添加/:id來對應 $router.push 中path攜帶的參數。在子組件中可以使用來獲取傳遞的參數值
另外頁面獲取參數如下

this.$route.params.id 

第二種方法 頁面刷新數據會丟失

通過路由屬性中的name來確定匹配的路由，通過params來傳遞參數。

methods：{ insurance(id) { this.$router.push({ name: 'particulars', params: { id: id } }) } 

對應路由配置: 注意這里不能使用:/id來傳遞參數了，因為組件中，已經使用params來攜帶參數了。

 { path: '/particulars', name: 'particulars', component: particulars } 

子組件中: 這樣來獲取參數

this.$route.params.id 

第三種方法
使用path來匹配路由，然后通過query來傳遞參數
這種情況下 query傳遞的參數會顯示在url后面?id=？

methods：{ insurance(id) { this.$router.push({ path: '/particulars', query: { id: id } }) } 

對應路由配置：

{ path: '/particulars', name: 'particulars', component: particulars } 

對應子組件: 這樣來獲取參數

this.$route.query.id 

特別注意哦，
組件中 獲取參數的時候是router 這很重要~~~

作者：w晚風
鏈接：https://www.jianshu.com/p/d276dcde6656
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。