本文主要參考技術胖老師的視訊教程。
簡介
由於Vue在開發時對路由支援的不足，後來官方補充了vue-router外掛，它在Vue的生態環境中非常重要，在實際開發中只要編寫一個頁面就會操作vue-router。要學習vue-router就要先知道這裡的路由是什麼？這裡的路由並不是指我們平時所說的硬體路由器，這裡的路由就是SPA（單頁應用）的路徑管理器。再通俗的說，vue-router就是我們WebApp的連結路徑管理系統。
有的小夥伴會有疑慮，為什麼我們不能像原來一樣直接用<a></a>標籤編寫連結哪？因為我們用Vue作的都是單頁應用，就相當於只有一個主的index.html頁面，所以你寫的<a></a>標籤是不起作用的，你必須使用vue-router來進行管理。
解讀router/index.js檔案
我們用vue-cli生產了我們的專案結構，你可以在src/router/index.js檔案，這個檔案就是路由的核心檔案，我們先解讀一下它。
import Vue from `vue` //引入Vue
import Router from `vue-router` //引入vue-router
import Hello from `@/components/Hello` //引入根目錄下的Hello.vue元件
Vue.use(Router) //Vue全域性使用Router
export default new Router({
routes: [ //配置路由，這裡是個陣列
{ //每一個連結都是一個物件
path: `/`, //連結路徑
name: `Hello`, //路由名稱，
component: Hello //對應的元件模板
}
]
})
複製程式碼增加一個Hi的路由和頁面
對路由的核心檔案熟悉後，我們試著增加一個路由配置，我們希望在位址列輸入 http://localhost:8080/#/hi 的時候出現一個新的頁面，先來看一下我們希望得到的效果。
具體操作步驟如下：
- 在src/components目錄下，新建 Hi.vue 檔案。
- 編寫檔案內容，和我們之前講過的一樣，檔案要包括三個部分
<template><script>和<style>。檔案很簡單，只是列印一句話。
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: `hi`,
data () {
return {
msg: `Hi, I am JSPang`
}
}
}
</script>
<style scoped>
</style>
複製程式碼- 引入 Hi元件：我們在router/index.js檔案的上邊引入Hi元件
import Hi from `@/components/Hi` - 增加路由配置：在router/index.js檔案的routes[]陣列中，新增加一個物件，程式碼如下。
{
path:`/hi`,
name:`Hi`,
component:Hi
}
複製程式碼router-link製作導航
現在通過在位址列改變字串地址，已經可以實現頁面內容的變化了。這並不滿足需求，我們需要的是在頁面上有個像樣的導航連結，我們只要點選就可以實現頁面內容的變化。製作連結需要<router-link>標籤，我們先來看一下它的語法。
<router-link to="/">[顯示欄位]</router-link>
子路由
改造App.vue的導航程式碼
App.vue程式碼，注意<route-view>的用法。
<template>
<div id="app">
<img src="./assets/logo.png">
<p>導航 ：
<router-link to="/">首頁</router-link> |
<router-link to="/hi">Hi頁面</router-link> |
<router-link to="/hi/hi1">-Hi頁面1</router-link> |
<router-link to="/hi/hi2">-Hi頁面2</router-link>
<router-link to="/hi1">Hi頁面</router-link>
</p>
<router-view/>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
複製程式碼改寫components/Hi.vue頁面
把Hi.vue改成一個通用的模板，加入標籤，給子模板提供插入位置。“Hi頁面1” 和 “Hi頁面2” 都相當於“Hi頁面”的子頁面，有點想繼承關係。我們在“Hi頁面”里加入標籤。
Hi1.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: `hi`,
data () {
return {
msg: `Hi, I am Hi1!`
}
}
}
</script>
<style scoped>
</style>
複製程式碼Hi2.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: `hi`,
data () {
return {
msg: `Hi, I am Hi2`
}
}
}
</script>
<style scoped>
</style>
複製程式碼Hi.vue程式碼
注意新增的router-view
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<router-view class="aaa"></router-view>
</div>
</template>
<script>
export default {
name: `hi`,
data () {
return {
msg: `Hi, I am JSPang`
}
}
}
</script>
<style scoped>
</style>
複製程式碼修改router/index.js程式碼
我們現在導航有了，母模板和子模板也有了，只要改變我們的路由配置檔案就可以了。子路由的寫法是在原有的路由配置下加入children欄位。
children:[
{path:`/`,component:xxx},
{path:`xx`,component:xxx},
]
複製程式碼children欄位後邊跟的是個陣列，陣列裡和其他配置路由基本相同，需要配置path和component。具體看一下這個子路由的配置寫法。
import Vue from `vue`
import Router from `vue-router`
import Hello from `@/components/Hello`
import Hi from `@/components/Hi`
import Hi1 from `@/components/Hi1`
import Hi2 from `@/components/Hi2`
Vue.use(Router)
export default new Router({
routes: [
{
path: `/`,
name: `Hello`,
component: Hello
},{
path:`/hi`,
component:Hi,
children:[
{path:`/`,component:Hi},
{path:`hi1`,component:Hi1},
{path:`hi2`,component:Hi2},
]
}
]
})
複製程式碼