概論
Vue是一個單頁面應用（無法通過普通的html中的<a href="***">來實現跳轉），我們要實現界面切換，必須要瞭解什麼是路由、Vue中是怎麼使用路由的。
一、什麼是Vue-Router
爲了彌補Vue在開發時對路由支持的不足，官方補充了vue-router插件，它在Vue的生態環境中非常重要，在實際開發中只要編寫一個頁面就會操作vue-router。
對於大多數單頁面應用，都推薦使用官方支持的 vue-router 庫。更多細節可以移步 vue-router 文檔。
1.1 Vue Router的官方解釋：
Vue Router是Vue.js的官方路由器。它與Vue.js核心深度集成，使使用Vue.js輕鬆構建單頁應用程序變得輕而易舉。功能包括：
- 嵌套路線/視圖映射
- 模塊化，基於組件的路由器配置
- 路由參數，查詢，通配符
- 查看由Vue.js過渡系統提供動力的過渡效果
- 細粒度的導航控制
- 與自動活動CSS類的鏈接
- HTML5歷史記錄模式或哈希模式，在IE9中具有自動備用
- 可自定義的滾動行爲
1.2 路由安裝
我們在創建項目時已經選擇安裝了vue-router，如果沒有安裝，可以使用npm進行安裝的，我們可以開命令行工具，進入項目目錄，輸入命令安裝路由：
npm install vue-router --save-dev
1.3 路由入門官方介紹
https://cn.vuejs.org/v2/guide/routing.html
https://router.vuejs.org/guide/#javascript
二、配置文件入門
2.1 package.json
安裝好了vue-router，我們可以看到package.js中的dependencies中會有vue-router的配置信息。
2.2 src/router/index.js
src/router/index.js文件是路由的核心文件，以後我們自己寫的所有組件路徑都要配置在這裏，它管理着項目的所有鏈接路徑。
2.3 vue-router思維導圖
圖片來自：https://blog.csdn.net/qq_42346509/article/details/103371966
詳細用法可參考：https://blog.csdn.net/qq_30904985/article/details/82316984
三、博客路由小實戰
3.1 新增模塊（Admin、Login、Main）
Admin-博客管理平臺，Login-博客登錄頁面，Main-博客主頁。爲了快速實現路由效果，我這裏就簡單創建了這三個模塊，代碼如下：
3.2 配置路由
vue-router配置方式：
- 方式1：先引入模塊再使用；
- 方式2：vue-router配置路由，使用vue的異步組件技術，可以實現按需加載。
3.2 總體效果
默認顯示Main-blog主頁，login顯示的是登錄頁面，admin顯示管理平臺頁面
