vuerouter鉤子函數，23《Vue 入門教程》VueRouter 編程式導航
1. 前言
本小(xiao)節我們介紹如何(he)使(shi)用(yong) VueRouter 編程式(shi)導航。包括 push、replace、go 三(san)種(zhong)(zhong)方法的(de)使(shi)用(yong)和區別。其中了解和掌握三(san)種(zhong)(zhong)方法使(shi)用(yong)方式(shi)以及他們之間的(de)區別是本節的(de)重點。本節的(de)內容(rong)相對容(rong)易，同學們只需要在學完(wan)本節的(de)內容(rong)后稍加(jia)記憶(yi)，并通(tong)過(guo)一(yi)兩個案例進行調試，相信一(yi)定可以對這三(san)種(zhong)(zhong)方法的(de)使(shi)用(yong)游刃有余(yu)。
2. router.push
在之前的小節中，我們的路由跳轉是通過標簽(qian) <router-link> 來完成的(de)。但有時候(hou)，我們(men)可能需要通過一(yi)個(ge)普通的(de) onClick 事件來完成跳轉。router.push 就可以幫(bang)我們(men)實現這一(yi)點。
2.1 基本用法
讓我們來看一個簡單的示例：
實例演示
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><body> <div id="app"> <div> <button @click="jump('index')">首頁</button> <button @click="jump('article')">文章</button> </div> <router-view></router-view> </div></body><script src="//unpkg.com/vue/dist/vue.js"></script><script src="//unpkg.com/vue-router/dist/vue-router.js"></script><script type="text/javascript">const Index = Vue.component('index', { template: '<div>Hello，歡迎使用慕課網學習 Vue 教程！</div>',
})const Article = Vue.component('myArticle', { template: `<ul><li>1. Vue 計算屬性的學習</li><li>2. Vue 偵聽器的學習</li></ul>`,
})const routes = [
{ path: '/index', component: Index },
{ path: '/article', component: Article }
]const router = new VueRouter({ routes: routes
}) var vm = new Vue({ el: '#app',
router,
data() { return {}
}, methods: {
jump(name) { this.$router.push(name)
}
}
})</script></html>"運(yun)行案例" 可(ke)查看在線(xian)運(yun)行效果
HTML 代碼(ma)第(di) 12-13 行，我們(men)定義了兩個(ge)按(an)鈕，并給(gei)他(ta)們(men)點(dian)擊事(shi)件 jump。 HTML 代碼(ma)第(di) 15 行，我們(men)使(shi)用 <router-view></router-view> 組(zu)件來渲染匹配(pei)組(zu)件。 JS 代碼第(di)(di) 5-7 行(xing)，我們定(ding)(ding)義了組(zu)件 Index。 JS 代碼第(di)(di) 9-11 行(xing)，我們定(ding)(ding)義了組(zu)件 Article。 JS 代碼第(di)(di) 13-16 行(xing)，我們定(ding)(ding)義了路由(you)(you)數組(zu)： \1. 首頁路由(you)(you)，地址為(wei) ‘/index’，匹配(pei)組(zu)件 Index。 \2. 文章路由(you)(you)，地址為(wei) ‘/article’，匹配(pei)組(zu)件 Article。 JS 代碼第(di)(di) 18-20 行(xing)，創建 router 實例，然后傳 routes 配置。 JS 代(dai)碼(ma)第 24 行，通(tong)過 router 配置參數(shu)注入(ru)路由。 JS 代(dai)碼(ma)第 29-31 行，我們定義(yi)來 jump 函數(shu)，通(tong)過 router.push 實現路由跳(tiao)轉。
2.2 對象格式的參數
在上(shang)一個(ge)例子(zi)中，我們通過 router.push 的(de)方法實(shi)現了路由跳(tiao)轉，該(gai)方法接(jie)收跳(tiao)轉路徑作為(wei)(wei)參數(shu)。實(shi)際上(shang)，router.push 也可以接(jie)收一個(ge)描述地址的(de)對象作為(wei)(wei)參數(shu)。例如：
// 字符串形式的參數router.push('home')// 通過路徑描述地址router.push({ path: 'home' })// 通過命名的路由描述地址router.push({ name: 'user' }})
代碼塊12345678910當以對象形式傳遞參(can)(can)數的(de)時候，還可以有一(yi)些其他屬性，例(li)如(ru)查詢(xun)參(can)(can)數 params、query。路由傳參(can)(can)我們將有一(yi)個專(zhuan)門(men)的(de)小節來學習，在這里同學們只需要有一(yi)個印象即可。
3. router.replace
跟(gen) router.push 很(hen)像(xiang)，唯一的(de)不同(tong)就是，它(ta)不會向 history 添加(jia)新記錄，而是跟(gen)它(ta)的(de)方法名一樣 —— 替換掉當前的(de) history 記錄。我們(men)將上一個例子中的(de) jump 函(han)數稍加(jia)修改：
實(shi)例演示
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><body> <div id="app"> <div> <button @click="jump('index')">首頁</button> <button @click="jump('article')">文章</button> </div> <router-view></router-view> </div></body><script src="//unpkg.com/vue/dist/vue.js"></script><script src="//unpkg.com/vue-router/dist/vue-router.js"></script><script type="text/javascript">const Index = Vue.component('index', { template: '<div>Hello，歡迎使用慕課網學習 Vue 教程！</div>',
})const Article = Vue.component('myArticle', { template: `<ul><li>1. Vue 計算屬性的學習</li><li>2. Vue 偵聽器的學習</li></ul>`,
})const routes = [
{ path: '/index', component: Index },
{ path: '/article', component: Article }
]const router = new VueRouter({ routes: routes
}) var vm = new Vue({ el: '#app',
router,
data() { return {}
}, methods: {
jump(name) { this.$router.replace(name)
}
}
})</script></html>"運行案(an)例" 可查(cha)看在(zai)線運行效果
代碼解釋(shi)： JS 代碼第(di) 29-31 行，我們定義來 jump 函數，通過 router.replace 實(shi)現路(lu)由跳轉(zhuan)。
4. router.go
這(zhe)個(ge)方法的參數是(shi)一個(ge)整(zheng)數，意思(si)是(shi)在(zai) history 記錄中向前(qian)或者后退(tui)多少步。例(li)如：
// 在瀏覽器記錄中前進一步router.go(1)// 后退一步記錄router.go(-1)// 前進 3 步記錄router.go(3)// 如果 history 記錄不夠用，路由將不會進行跳轉router.go(-100) router.go(100)
接下來我(wo)們仍(reng)然對第一(yi)個案例稍加修改：
實例演(yan)示
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><body> <div id="app"> <div> <router-link to="index">首頁</router-link> <router-link to="article">文章</router-link> </div> <button @click="go(1)">前進一步</button> <button @click="go(-1)">后路一步</button> <button @click="go(3)">前進三步</button> <button @click="go(-3)">后路三步</button> <router-view></router-view> </div></body><script src="//unpkg.com/vue/dist/vue.js"></script><script src="//unpkg.com/vue-router/dist/vue-router.js"></script><script type="text/javascript">const Index = Vue.component('index', { template: '<div>Hello，歡迎使用慕課網學習 Vue 教程！</div>',
})const Article = Vue.component('myArticle', { template: `<ul><li>1. Vue 計算屬性的學習</li><li>2. Vue 偵聽器的學習</li></ul>`,
})const routes = [
{ path: '/index', component: Index },
{ path: '/article', component: Article }
]const router = new VueRouter({ routes: routes
}) var vm = new Vue({ el: '#app',
router,
data() { return {}
}, methods: {
go(n) { this.$router.go(n)
}
}
})</script></html>"運行案例" 可查看在(zai)線運行效果(guo)
代碼解(jie)釋(shi)： HTML 代碼第 15-18 行，我們定義了四個按(an)鈕(niu)，并給他們點擊事件 go。 JS 代碼第 29-31 行，我們定義來 go 函數，通過 router.go 實現路由(you)跳轉。
5. 小結
本(ben)節，我們帶大家學(xue)習了 VueRouter 如何通過方法來實現跳轉。主要知識點(dian)有以下幾點(dian)：
通過 router.push 跳轉(zhuan)到指定(ding)路由。
通過(guo) router.replace 替換當前路由(you)記錄跳(tiao)轉(zhuan)指定路由(you)。
通過(guo) router.go 實(shi)現路由的(de)前進(jin)、后退功能。
