對(duì)于網(wǎng)站開(kāi)發(fā)而言，在很多的情況下，例如表單提交，組件跳轉(zhuǎn)之類(lèi)的操作，我們需要使用到上一個(gè)表單、組件的一些數(shù)據(jù)，這時(shí)我們就需要將需要的參數(shù)通過(guò)參數(shù)傳參的方式在路由間進(jìn)行傳遞。

比如上面用戶登錄要傳入用戶名、密碼，那么如何傳遞呢？

1、query 查詢參數(shù)傳參

總結(jié)：

使用query傳參就是注意兩點(diǎn)：

傳參：

將我們需要的參數(shù)以 key=value 的方式放在 url 地址中：?name=’xzx’&pwd=’123

接參：

全部參數(shù)：{{$route.query}},

用戶名：{{$route.query.name}},

密碼：{{$route.query.pwd}}

1.1、query 查詢參數(shù)傳參

就是將我們需要的參數(shù)以 key=value 的方式放在 url 地址中。類(lèi)似如下：

login?name=’xzx’&pwd=’123’

當(dāng)然這里的參數(shù)值：xzx，123 可以通過(guò)當(dāng)前組件的表單中輸入。之后，通過(guò)獲取這兩個(gè)參數(shù)值即可實(shí)現(xiàn)我們的需求。

單擊【登錄】時(shí)傳遞 name 和 pwd 參數(shù)，即將上面紫色底紋代碼改為：

<router-link to=“/account/login?name=xzx&pwd=123” tag=“l(fā)i”>登錄</router-link>

1.2、進(jìn)入 login 組件如何獲取到傳入的參數(shù)呢？

當(dāng)我們將實(shí)例化的 VueRouter 對(duì)象掛載到 Vue 實(shí)例后，Vue

Router 在我們的 Vue 實(shí)例上創(chuàng)建了兩個(gè)屬性對(duì)象

$router(router 實(shí)例) 和 $route(當(dāng)前頁(yè)面的路由信息)。

通過(guò) this.$route.query 可以獲取到 query 查詢參數(shù)(this 就表示當(dāng)前 vm 實(shí)例，這里可以省略)。

上面例子中的如下代碼：

var Login = {

template: ‘<h4>這里是登錄頁(yè)面內(nèi)容</h4>’ }

改為如下：

var Login = {

template: ‘<h4>這里是登錄頁(yè)面內(nèi)容,獲取賬戶參數(shù):{{$route.query}},

用戶名：{{$route.query.name}},

密碼：{{$route.query.pwd}}</h4>’ }

運(yùn)行結(jié)果：成功獲取到了用戶名和密碼。

2、$route.path 獲取當(dāng)前路由的路徑

路由對(duì)象還有些其他屬性，比如：$route.path，獲取路由的當(dāng)前路由的路徑。

const Register = {

template: ‘<h4>這里是注冊(cè)頁(yè)面內(nèi)容,獲取傳遞的參數(shù):{{$route.params}},

用戶名：{{$route.params.name}},

密碼:{{$route.params.pwd}},

路由路徑{{$route.path}}</h4>’ }

運(yùn)行結(jié)果如下：獲取到了當(dāng)前路由，不過(guò)這里是 REST 風(fēng)格的路由，也就說(shuō) xzx/123456 不是子路由，前面指明了為用戶名和密碼。（REST 即表述性狀態(tài)傳遞，英文：Representational State Transfer，是一種 web 程序設(shè)計(jì)風(fēng)格）