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

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

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

總結(jié)：

使用query傳參就是注意兩點：

傳參：

將我們需要的參數(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 地址中。類似如下：

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

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

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

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

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

當我們將實例化的 VueRouter 對象掛載到 Vue 實例后，Vue

Router 在我們的 Vue 實例上創(chuàng)建了兩個屬性對象

$router(router 實例) 和 $route(當前頁面的路由信息)。

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

上面例子中的如下代碼：

var Login = {

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

改為如下：

var Login = {

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

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

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

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

2、$route.path 獲取當前路由的路徑

路由對象還有些其他屬性，比如：$route.path，獲取路由的當前路由的路徑。

const Register = {

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

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

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

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

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