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