在上一篇内容講到關于單頁面元件的内容，同時也附上補充講了關于單頁面（SPA）和多頁面（MPA）之間的優缺點，在本篇目當中就要來講這個路由（vue-router），通過路由來實作頁面的局部切換或者更改：附上vue-router文檔 —— 官方文檔 | Vue Router
一級路由配置
可以在 main.js 中引入路由子產品，這些其實在建立項目的時候就已經幫我們處理好了的；
在 /router/index.js 中來處理一下，來通過簡單的一部分對這個路由檔案進行了解：
然後将項目運作起來時，會發現在浏覽器請求url ：http://localhost:8080/ 的時候會發現請求的url會時變成 http://localhost:8080/#/
現在來将原先 /views/HomeView.vue 檔案進行一個簡化；
<!-- /views/HomeView.vue -->
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
</div>
</template>
通過路由資訊的配置，将HomeView.vue元件引入，當path為Home時，即請求為http://localhost:8080/#/home 的時候就會對應的切換到HomeView.vue 元件，那麼下面來進行一下嘗試：
在 /router/index.js 中配置：
這樣一來通過請求 http://localhost:8080/#/home 能否切換到HomeView元件呢？
很顯然是失敗了，沒有将HomeView元件中的内容顯示出來，這是為什麼呢？
還記得在前面講過這個項目的入口檔案 main.js ，再拿出來看一看：
即使在路由配置當中通過path: ' /home '，是可以比對到HomeView元件，但關鍵是這個HomeView元件應該如何去顯示，顯示在哪裡呢？
如果要去顯示就得到App.vue中去顯示，App.vue同時要預留一個位置給HomeView元件來進行顯示内容；通過 <router-view></router-view> 來進行預留位置；
<!-- App.vue -->
<template>
<div id="app">
<sHello></sHello>
<button>按鈕</button>
<router-view></router-view>
</div>
</template>
<script>
import hello from './components/SayHello.vue'
import Vue from 'vue'
Vue.component('sHello', hello)
export default {}
</script>
<style>
button {
background: yellow;
}
</style>
現在來再次測試運作來看一下HomeView元件是否成功了 —— 成功将HomeView元件顯示出來了！
下面就來用前面所講到的内容來完成一個聲明式導航！
聲明式導航
講到聲明式導航大家已經了解和清除了，那麼不再贅述，先來看一下簡單的效果：
當路由進行變化時，對應的頁面也将随即切換，當請求的url位址為 localhost:8080/#/home 時頁面會切換到首頁頁面（HomeView），服務（ServerView）和關于(AboutView) 這個兩個同理，那麼下面先來編寫這幾個頁面：
1）在 /views/ 目錄下編寫如下幾個頁面檔案：
<!-- HomeView.vue -->
<template>
<div class="home">
這是首頁頁面
</div>
</template>
<!--ServerView.vue-->
<template>
<div class="server">
這是服務頁面
</div>
</template>
<!--AboutView.vue-->
<template>
<div class="about">
這是關于頁面
</div>
</template>
2）在 /router/index.js 檔案中配置路由資訊：
import Vue from 'vue'
import VueRouter from 'vue-router'
// 引入元件
import Home from '../views/HomeView.vue'
import Server from '../views/ServerView.vue'
import About from '../views/AboutView.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/'
},
{
path: '/home',
component: Home
},
{
path: '/server',
component: Server
},
{
path: '/about',
component: About
}
]
const router = new VueRouter({
routes
})
export default router
3）編寫聲明式導航元件
建立 /components/TabBar.vue 檔案作為導航元件檔案，在 a标簽 中通過 #/path路徑 就可以進行跳轉的切換，這裡的預編譯器選擇是 "scss" ；
<template>
<nav>
<ul>
<li><a href="#/home" target="_blank" rel="external nofollow" >首頁</a></li>
<li><a href="#/server" target="_blank" rel="external nofollow" >服務</a></li>
<li><a href="#/about" target="_blank" rel="external nofollow" >關于</a></li>
</ul>
</nav>
</template>
<script>
export default {
}
</script>
<style >
nav{
margin: 0 auto;
padding: 0;
border-bottom: 1px solid black;
}
ul{
display: flex;
li{
flex:1;
text-align: center;
list-style: none;
a{
text-decoration: none;
}
}
}
</style>
4）将聲明式導航元件引入App.vue中，最後不要忘記在 App.vue 中預留一個顯示的容器 <router-view></router-view> 來讓其有顯示的位置，否則不報錯，也不會顯示出來；
<!--App.vue-->
<template>
<div id="app">
<tabBar></tabBar>
<router-view></router-view>
</div>
</template>
<script>
import tabbar from './components/TabBar'
import Vue from 'vue'
Vue.component('tabBar', tabbar)
export default {
}
</script>
<style>
button {
background: yellow;
}
</style>
5）項目測試運作：
- 點選【首頁】： 切換路由時對應的頁面也會随即切換到這個首頁頁面；
- 點選【服務】，點選【關于】：測試OK！
location.hash
通過導航點選可以進行一個切換，對應的路經發生變化，window.onhashchange方法能夠監聽到錨點的改變該函數就會觸發回調，在回調中擷取到location.hash的值，這樣一來就可以對導航文字進行效果處理，如高亮顯示；—— [ #是錨點，#/路徑 是hash(哈希) ]
知道了這樣一個原理後，我們不會這麼來操作，因為Vue已經提供好了，通過 <router-link> 标簽，下面來調整 TabBar.vue 中的代碼段：
<!-- App.vue -->
<template>
<nav>
<ul>
<router-link to="/home" tag="li">首頁</router-link>
<router-link to="/server" tag="li">服務</router-link>
<router-link to="/about" tag="li">關于</router-link>
</ul>
</nav>
</template>
進行測試運作檢視一下：
觀察可以看到原先并沒有設定它的類選擇器進行樣式顯示，這樣一來可以進行高亮效果的顯示，隻需要進行樣式的添加即可：
<style >
.router-link-active{
color:skyblue;
font-weight: bold;
}
...
</style>
可以看到選擇的這個導航已經有了高亮的文字顯示了，那麼如果需要避免沖突，可以自行的來設定這個類選擇器的樣式，給 <router-link> 标簽中添加active-class屬性；如下：
<template>
<nav>
<ul>
<router-link to="/home" tag="li" active-class="active-chosen">首頁</router-link>
<router-link to="/server" tag="li" active-class="active-chosen">服務</router-link>
<router-link to="/about" tag="li" active-class="active-chosen">關于</router-link>
</ul>
</nav>
</template>
<script>
export default {}
</script>
<style >
.active-chosen{
color: skyblue;
font-weight: bold;
}
</style>
也許讀者已經發現了一個問題，當進入頁面的時候不應該就是【首頁】内容了嗎？怎麼還需要再點選一次首頁才能看到【首頁】呢？這就是下面要來講到的 "重定向" ！
重定向
當進入頁面的時候位址是 ： http://localhost:8080/#/ ，那麼現如今我們的首頁位址則是 http://localhost:8080/#/home，則當進入頁面時就定制重定向到首頁的位址即可：
在 /router/index.js 中添加路由配置資訊：
...
const routes = [
{
path: '/',
redirect: '/home'
},
...
通過 redirect 将路徑 " / " 進行重定向到 " /home "，接下來的再運作測試項目的時候進入的頁面就是首頁了；
以上就是本篇目的全部内容了，通過vue-router了解到了基礎的路由資訊、一級路由配置、聲明式導航和在聲明式導航中了解到了路由切換會觸發location.hash執行以及路由的重定向問題，再次感謝大家的支援！