此間少年_ ·VueRouter 編程式導(dǎo)航
1. 前言
本小節(jié)我們介紹如何使用 VueRouter 編程式導(dǎo)航。包括 push、replace、go 三種方法的使用和區(qū)別。其中了解和掌握三種方法使用方式以及他們之間的區(qū)別是本節(jié)的重點(diǎn)。本節(jié)的內(nèi)容相對(duì)容易，同學(xué)們只需要在學(xué)完本節(jié)的內(nèi)容后稍加記憶，并通過一兩個(gè)案例進(jìn)行調(diào)試，相信一定可以對(duì)這三種方法的使用游刃有余。
2. router.push
在之前的小節(jié)中，我們的路由跳轉(zhuǎn)是通過標(biāo)簽 <router-link> 來完成的。但有時(shí)候，我們可能需要通過一個(gè)普通的 onClick 事件來完成跳轉(zhuǎn)。router.push 就可以幫我們實(shí)現(xiàn)這一點(diǎn)。
2.1 基本用法
讓我們來看一個(gè)簡(jiǎn)單的示例：
<!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')">首頁(yè)</button>
<button @click="jump('article')">文章</button>
</div>
<router-view></router-view>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">
const Index = Vue.component('index', {
template: '<div>Hello，歡迎使用慕課網(wǎng)學(xué)習(xí) Vue 教程！</div>',
})
const Article = Vue.component('myArticle', {
template: `<ul><li>1. Vue 計(jì)算屬性的學(xué)習(xí)</li><li>2. Vue 偵聽器的學(xué)習(xí)</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>
HTML 代碼第 12-13 行，我們定義了兩個(gè)按鈕，并給他們點(diǎn)擊事件 jump。
HTML 代碼第 15 行，我們使用 <router-view></router-view> 組件來渲染匹配組件。
JS 代碼第 5-7 行，我們定義了組件 Index。
JS 代碼第 9-11 行，我們定義了組件 Article。
JS 代碼第 13-16 行，我們定義了路由數(shù)組：
1. 首頁(yè)路由，地址為 ‘/index’，匹配組件 Index。
2. 文章路由，地址為 ‘/article’，匹配組件 Article。
JS 代碼第 18-20 行，創(chuàng)建 router 實(shí)例，然后傳 routes 配置。
JS 代碼第 24 行，通過 router 配置參數(shù)注入路由。
JS 代碼第 29-31 行，我們定義來 jump 函數(shù)，通過 router.push 實(shí)現(xiàn)路由跳轉(zhuǎn)。
2.2 對(duì)象格式的參數(shù)
在上一個(gè)例子中，我們通過 router.push 的方法實(shí)現(xiàn)了路由跳轉(zhuǎn)，該方法接收跳轉(zhuǎn)路徑作為參數(shù)。實(shí)際上，router.push 也可以接收一個(gè)描述地址的對(duì)象作為參數(shù)。例如：
// 字符串形式的參數(shù)
router.push('home')
// 通過路徑描述地址
router.push({ path: 'home' })
// 通過命名的路由描述地址
router.push({ name: 'user' }})
當(dāng)以對(duì)象形式傳遞參數(shù)的時(shí)候，還可以有一些其他屬性，例如查詢參數(shù) params、query。路由傳參我們將有一個(gè)專門的小節(jié)來學(xué)習(xí)，在這里同學(xué)們只需要有一個(gè)印象即可。
3. router.replace
跟 router.push 很像，唯一的不同就是，它不會(huì)向 history 添加新記錄，而是跟它的方法名一樣 —— 替換掉當(dāng)前的 history 記錄。我們將上一個(gè)例子中的 jump 函數(shù)稍加修改：
<!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')">首頁(yè)</button>
<button @click="jump('article')">文章</button>
</div>
<router-view></router-view>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">
const Index = Vue.component('index', {
template: '<div>Hello，歡迎使用慕課網(wǎng)學(xué)習(xí) Vue 教程！</div>',
})
const Article = Vue.component('myArticle', {
template: `<ul><li>1. Vue 計(jì)算屬性的學(xué)習(xí)</li><li>2. Vue 偵聽器的學(xué)習(xí)</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>
代碼解釋：
JS 代碼第 29-31 行，我們定義來 jump 函數(shù)，通過 router.replace 實(shí)現(xiàn)路由跳轉(zhuǎn)。
4. router.go
這個(gè)方法的參數(shù)是一個(gè)整數(shù)，意思是在 history 記錄中向前或者后退多少步。例如：
// 在瀏覽器記錄中前進(jìn)一步
router.go(1)
// 后退一步記錄
router.go(-1)
// 前進(jìn) 3 步記錄
router.go(3)
// 如果 history 記錄不夠用，路由將不會(huì)進(jìn)行跳轉(zhuǎn)
router.go(-100)
router.go(100)
接下來我們?nèi)匀粚?duì)第一個(gè)案例稍加修改：
<!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">首頁(yè)</router-link>
<router-link to="article">文章</router-link>
</div>
<button @click="go(1)">前進(jìn)一步</button>
<button @click="go(-1)">后路一步</button>
<button @click="go(3)">前進(jìn)三步</button>
<button @click="go(-3)">后路三步</button>
<router-view></router-view>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">
const Index = Vue.component('index', {
template: '<div>Hello，歡迎使用慕課網(wǎng)學(xué)習(xí) Vue 教程！</div>',
})
const Article = Vue.component('myArticle', {
template: `<ul><li>1. Vue 計(jì)算屬性的學(xué)習(xí)</li><li>2. Vue 偵聽器的學(xué)習(xí)</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>
代碼解釋：
HTML 代碼第 15-18 行，我們定義了四個(gè)按鈕，并給他們點(diǎn)擊事件 go。
JS 代碼第 29-31 行，我們定義來 go 函數(shù)，通過 router.go 實(shí)現(xiàn)路由跳轉(zhuǎn)。
5. 小結(jié)
本節(jié)，我們帶大家學(xué)習(xí)了 VueRouter 如何通過方法來實(shí)現(xiàn)跳轉(zhuǎn)。主要知識(shí)點(diǎn)有以下幾點(diǎn)：
- 通過 router.push 跳轉(zhuǎn)到指定路由。
- 通過 router.replace 替換當(dāng)前路由記錄跳轉(zhuǎn)指定路由。
- 通過 router.go 實(shí)現(xiàn)路由的前進(jìn)、后退功能。
2025 imooc.com All Rights Reserved |