1、this.$router.push跳轉路由/添加路由

總結

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

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

// 字符串 => /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 中具有三種導航方法，分別為 push、replace和 go。我們前面例子中通過在頁面上設置 router-link 標簽進行路由地址間的跳轉，就等同于執(zhí)行 push 方法。

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

當我們需要跳轉新頁面時，我們就可以通過 push 方法將一條新的路由記錄添加到瀏覽器的 history 棧中，通過 history 的自身特性，從而驅使瀏覽器進行頁面的跳轉。同時，因為在 history 會話歷史中會一直保留著這個路由信息，所以當我們后退時還是可以退回到當前的頁面。

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

// 字符串 => /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})

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

運行效果：

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

this.$router.push({

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

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

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

wd:this.pwd}

})

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

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

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

在上面例子中修改 2 處。

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

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

2、添加相應的方法

methods:{

replace(){

this.$router.replace({

path:‘/news’ })

}}

結果：

3、$router.go（）跳轉

當我們使用 go 方法時，我們就可以在 history 記錄中向前或

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

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

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

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

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

// 前進 2 步記錄

this.$router.go(2)

// 如果 history 記錄不夠用，會導致失敗

this.$router.go(-60)

this.$router.go(60)

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

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

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

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

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

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

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

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