開(kai)發中，參(can)數的(de)(de)傳(chuan)遞是個最基本的(de)(de)業務需求(qiu)。通過URL地址來(lai)傳(chuan)遞參(can)數是一(yi)個形式，這節課(ke)我(wo)們就(jiu)看(kan)看(kan)vue-router為我(wo)們提供了哪些傳(chuan)遞參(can)數的(de)(de)功(gong)能。我(wo)們先想(xiang)象一(yi)個基本需求(qiu)，就(jiu)是在我(wo)們點擊導(dao)航(hang)菜單(dan)時，跳(tiao)轉頁面(mian)上能顯示出當(dang)前頁面(mian)的(de)(de)路(lu)徑，來(lai)告(gao)訴用戶(hu)你想(xiang)在所看(kan)的(de)(de)頁面(mian)位置（類似(si)于面(mian)包屑(xie)導(dao)航(hang)）。

1.1.1、用name傳(chuan)遞(di)參數

前面課(ke)一直(zhi)出(chu)現name的(de)(de)選(xuan)項，但是我(wo)們都(dou)沒有(you)講(jiang)，這節我(wo)們講(jiang)name的(de)(de)一種作(zuo)用(yong)，傳遞(di)參數。接著上節的(de)(de)程序繼續編寫。

兩步完成用name傳(chuan)值并顯示在模板里：

在路由文件 src/router/index.js 里配置name屬(shu)性(xing)。

 routes: [ //配置路由，這里是個數組
  { //每一個鏈接都是一個對象    path: '/', //鏈接路徑    name: 'HelloWorld', //路由名稱，    component: HelloWorld //對應的組件模板
  }]

模板里(src/App.vue)用 $route.name 的形式(shi)接(jie)收，比如直接(jie)在模板中顯示(shi)：

<p>{{$route.name}}</p>

1.1.2、通過(guo) 標簽中(zhong)的to傳參

也許你也會覺得上邊的傳參很不正規，也不方便，其實我們多數傳參是不用name進行傳參的，我們用標簽中的to屬性進行傳參，需要您注意的是這里的to要進行一個綁定，寫成 :to 。

先來看一下(xia)這種(zhong)傳參(can)方法的(de)基(ji)本(ben)語法：

<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>

這里的to前邊(bian)是帶冒號的，然后后邊(bian)跟的是一個對象形勢(shi)的字符串.

• name：就是我們在路由(you)配置文件中起的name值。

• params：就是我們要傳(chuan)的參數，它(ta)也是對象形勢(shi)，在對象里可以傳(chuan)遞多個值。

了(le)解基本的(de)語法后，我們(men)改造一下我們(men)的(de)src/App.vue里的(de)標簽,我們(men)把hi1頁(ye)面的(de)進行修改。

<router-link :to="{name:'hi1',params:{username:'進擊的辣條'}}">Hi1頁面</router-link>|

把src/reouter/index.js文件里給hi1配置(zhi)的(de)路由起個(ge)name,就叫hi1.

{ path: 'hi1', name: 'hi1', component: Hi1 },

最后在模板里(src/components/Hi1.vue)用$route.params.username進行接收.

{{$route.params.username}}

總結： 今(jin)天我們(men)學(xue)習了兩種傳(chuan)參(can)(can)的(de)方法(fa)(fa)，一般(ban)會使(shi)用(yong)(yong)第二種方法(fa)(fa)。我們(men)通(tong)過學(xue)習也知道了name的(de)用(yong)(yong)途，一種作(zuo)(zuo)用(yong)(yong)是傳(chuan)參(can)(can)，一種作(zuo)(zuo)用(yong)(yong)是在(zai)傳(chuan)參(can)(can)時起到(dao)名稱作(zuo)(zuo)用(yong)(yong)。