1、this.$router.push跳轉(zhuǎn)路由/添加路由

總結(jié)

對于網(wǎng)站建設(shè)公司來講這個(gè)方法就是通過按鈕跳轉(zhuǎn)頁面并傳遞參數(shù)過去，通俗來講就是通過this.$router.push方法來提交表單給導(dǎo)航欄替換路由實(shí)現(xiàn)導(dǎo)航跳轉(zhuǎn)和傳參。

在 push 方法中，參數(shù)可以是一個(gè)字符串路徑，或者是一個(gè)描述地址的對象

// 字符串 => /account/register

this.$router.push(‘/account/register’)

// 對象 => /account/register

this.$router.push({path:‘/account/register’})

// 帶查詢參數(shù) 1

this.$router.push({path:‘/account/login’,query:{name:this.

name,pwd:this.pwd}})

// 帶查詢參數(shù) 2

this.$router.push({path:‘/account/login?name=’ + this.name+ ‘&pwd=’ + this.pwd})

上面?zhèn)鬟f參數(shù)我們都是“寫死”的，現(xiàn)在我來改為由用戶輸入。

在 Vue Router 中具有三種導(dǎo)航方法，分別為 push、replace和 go。我們前面例子中通過在頁面上設(shè)置 router-link 標(biāo)簽進(jìn)行路由地址間的跳轉(zhuǎn)，就等同于執(zhí)行 push 方法。

1.$router.push()跳轉(zhuǎn)路由/添加路由

當(dāng)我們需要跳轉(zhuǎn)新頁面時(shí)，我們就可以通過 push 方法將一條新的路由記錄添加到瀏覽器的 history 棧中，通過 history 的自身特性，從而驅(qū)使瀏覽器進(jìn)行頁面的跳轉(zhuǎn)。同時(shí)，因?yàn)樵?history 會話歷史中會一直保留著這個(gè)路由信息，所以當(dāng)我們后退時(shí)還是可以退回到當(dāng)前的頁面。

在 push 方法中，參數(shù)可以是一個(gè)字符串路徑，或者是一個(gè)描述地址的對象

// 字符串 => /account/register

this.$router.push(‘/account/register’)

// 對象 => /account/register

this.$router.push({path:‘/account/register’})

// 帶查詢參數(shù) 1

this.$router.push({path:‘/account/login’,query:{name:this.

name,pwd:this.pwd}})

// 帶查詢參數(shù) 2

this.$router.push({path:‘/account/login?name=’ + this.name+ ‘&pwd=’ + this.pwd})

需求：在上例中，單擊【賬戶】進(jìn)入賬戶頁面，該頁面有【登錄】和【注冊】兩個(gè)導(dǎo)航鏈接，單擊【登錄】鏈接進(jìn)入登錄頁面，該頁面中提供用戶名和密碼輸入框及【提交】按鈕，單擊【提交】按鈕在當(dāng)前頁面顯示出用戶名和密碼信息

運(yùn)行效果：

如果要改為在【注冊】頁面顯示信息，只要把 push 方法跳轉(zhuǎn)對象更改下即可，如下：

this.$router.push({

//想跳到哪里就設(shè)置相應(yīng)的路由，并傳遞參數(shù)信息。比

如跳到注冊頁面/account/register 也行

path:‘/account/register’,query:{name:this.name,p

wd:this.pwd}

})

2、$router.replace ()替換路由

replace 方法同樣可以達(dá)到實(shí)現(xiàn)路由跳轉(zhuǎn)的目的，不過，從名字中你也可以看出，與使用 push 方法跳轉(zhuǎn)不同是，當(dāng)我們使用replace 方法時(shí)，并不會往 history 棧中新增一條新的記錄，而是會替換掉當(dāng)前的記錄，因此，無法通過后退按鈕再回到被替換前的頁面。

需求：在【賬戶】頁面下有一個(gè)【替換路由】按鈕，單擊該按鈕，跳轉(zhuǎn)到【新聞】頁面。

在上面例子中修改 2 處。

1、在【賬戶】頁面下增加【替換路由】按鈕，即下面黃色底紋代碼。

<button @click=“replace”>替換路由</button>

2、添加相應(yīng)的方法

methods:{

replace(){

this.$router.replace({

path:‘/news’ })

}}

結(jié)果：

3、$router.go（）跳轉(zhuǎn)

當(dāng)我們使用 go 方法時(shí)，我們就可以在 history 記錄中向前或

者后退多少步，也就是說通過 go 方法你可以在已經(jīng)存儲的 history路由歷史中來回跳。

// 在瀏覽器記錄中前進(jìn)一步，等同于 history.forward()

this.$router.go(1)//下一頁

// 后退一步記錄，等同于 history.back()

this.$router.go(-1)//上一頁

// 前進(jìn) 2 步記錄

this.$router.go(2)

// 如果 history 記錄不夠用，會導(dǎo)致失敗

this.$router.go(-60)

this.$router.go(60)

4、$ router 與$ route 的區(qū)別

（1）$router : 是路由操作對象，實(shí)例對象，只寫對象，比如:

添加路由$router.push({ path: ‘/account/login’ });

替換路由$router.replace({ path: ‘/news’ })

（2）$route : 路由信息對象，只讀對象。比如:

獲取路由的路徑$route.path;

獲取 param 方式傳遞的參數(shù)$route.params.name

獲取 query 方式傳遞的參數(shù)$route.query.name