先看看以下代碼示例中的用到的路由表

{
  name: 'news',
  path: '/news',
  meta: { title: '新聞動(dòng)態(tài)' },
  component: () => import('@/views/news')
},
{
  name: 'detail',
  path: '/detail/:id',
  meta: { title: '新聞詳情' },
  component: () => import('@/views/detail')
}

我們實(shí)現(xiàn)路由的跳轉(zhuǎn)有兩種方法，聲明式和編程式，一般情況下用到編程式的方法來(lái)實(shí)現(xiàn)的情況會(huì)比較多，直接用router 的實(shí)例方法push()就能完成。
在 Vue 實(shí)例內(nèi)部，可以通過(guò)$router訪問(wèn)路由實(shí)例。因此你可以調(diào)用 this.$router.push

一、params傳參

$route.params 類型: Object。
一個(gè) key/value 對(duì)象，包含了動(dòng)態(tài)片段和全匹配片段，如果沒(méi)有路由參數(shù)，就是一個(gè)空對(duì)象

this.$router.push({ name: 'news', params: { type: 1 }})

此時(shí)瀏覽器url上是看不到任何參數(shù)的，像這樣http://localhost:9530/news
另外需要注意的是，params傳參時(shí)如果刷新頁(yè)面，參數(shù)是會(huì)丟失的

通過(guò)路由的名字的傳參的話，必須使用路由對(duì)象的屬性params。

對(duì)于像path: '/detail/:id'這樣的攜帶參數(shù)的動(dòng)態(tài)路由，傳參時(shí)也應(yīng)當(dāng)使用params，動(dòng)態(tài)路由傳參是可以再url上看到的，像這樣http://localhost:9530/detail/121。

二、query傳參

***route.query.user == 1，如果沒(méi)有查詢參數(shù)，則是個(gè)空對(duì)象。

const type = 1
this.$router.push({ path: 'news', query: { type: type  }})

此時(shí)瀏覽器url上是可以看得到參數(shù)的，像這樣http://localhost:9530/news/?type=1
通過(guò)query傳的參數(shù)在頁(yè)面刷新時(shí)不會(huì)丟失。

前面說(shuō)到的傳參都是比較簡(jiǎn)單的鍵值對(duì)。如果要傳一個(gè)內(nèi)容比較多的對(duì)象應(yīng)該怎么傳？
可以先用JSON.stringfy()把參數(shù)格式化，傳到頁(yè)面之后再用JSON.pares()去解析
但是這個(gè)方法會(huì)讓頁(yè)面的url過(guò)于冗長(zhǎng)很不美觀，所以比較好的方式是，頁(yè)面之間傳對(duì)象的話用store

三、props傳參

params和query這兩種傳參方式用的是比較多的，最近我在寫(xiě)項(xiàng)目的時(shí)候看到使用props去傳參的。這里也記錄一下
路由配置如下

{
  name: 'news',
  path: '/news',
  component: () => import('@/views/news'),
  meta: { title: '新聞詳情' },
  props: { type: 1 }
}

通過(guò)props的方式傳參時(shí)，在組件內(nèi)的取值方式也是通過(guò)props，像父子組件傳值那樣

props: ['type']

取值時(shí)也像使用組件參數(shù)一樣取值

this.type

路由傳參的props形式還有以下幾種寫(xiě)法
(1)props:true;
通過(guò)props設(shè)置為true,可以進(jìn)行布爾傳值,可以接受params的方法進(jìn)行傳遞

(2)props:{ key1:60, key2:70 };
通過(guò)props為對(duì)象的方式進(jìn)行處理靜態(tài)數(shù)據(jù)，可使用對(duì)象模式，上面示例中用到的就是props的靜態(tài)傳參

(3)props:(route)=>( { key:route.query.key })
通過(guò)props為函數(shù)時(shí)進(jìn)行傳值,此時(shí)用的query方式進(jìn)行參數(shù)的傳遞