題記 ——
嚴于律己，精于行動，點滴積累，着眼未來，你也許不負青春
本小節描述 1、前端路由的兩種主流實作方式 hash 與 history對象 簡述 2、分析使用在 vue 中通過 vue-router 實作路由功能
《Vue項目開發中的點滴積累 系列文章》點選檢視這裡
1 引言
vue-router 路由，在 vue 項目開發中實作頁面的跳轉控制 ，路由中 的 route, routes, router 我們這裡來分析一下
1.1 route 分析
route ,在英文中解析為 路線，在應用程式中，從一個頁面跳轉到另一個頁面，行成一條路線，可以稱做一條路由,如下圖所示中
1.2 routes 分析
routes 是 route的複數，s 字尾在英文中可表示多個，那麼在這裡，routes 就表示多個路由，一組路由，把上面圖中的兩條路由組合起來，形成一個數組。
1.3 router 分析
router 在英文的解析中是 路由器，那麼在這裡，我們可以了解成 router 相當于一個管理者，它用來管理路由。 因為routes 隻是定義了一組路由，它放在哪裡是靜止的，當使用者點選 頁面一中的 按鈕的時候，這時router 就起作用了，它到routes 中去查找，去找到對應的 按鈕事件 内容
1.4 前端路由的實作原理
早期的路由都是後端實作的，直接根據 url 來 reload 頁面，頁面變得越來越複雜伺服器端壓力變大，随着 ajax 的出現，頁面實作非 reload 就能重新整理資料，也給前端路由的出現奠定了基礎. 對于現階段前端路由的兩種主流實作方式 【hash值 + onhashchange事件】和【history對象 + pushState()方法 + onpopstate事件】
1.4.1 前端路由 hash 簡述
早期的前端路由的實作就是基于location.hash來實作的,如下面代碼所示
window
這種方式是 主要是利用onhashchange事件監聽hash值的改變通過與我們設定的路由對比而響應對應的頁面。
出發hsah變化的方式除了上述我們寫到的 window.location.hash 直接指派外，還有一種方式就是通過a标簽，并設定href屬性，當使用者點選這個标簽後，URL就會發生改變，也就會觸發hashchange事件了
<
1.4.2 History API
在 HTML5 又提供了History API來實作URL的變化。其中做最主要的API有以下兩個：history.pushState()和history.repalceState()
我們可以了解為這兩個API可以在不進行重新整理的情況下，操作浏覽器的曆史紀錄。唯一不同的是，前者是新增一個曆史記錄，後者是直接替換目前的曆史記錄
<
2 vue-router 中頁面路由實作分析
在vue-router中, 有兩個标簽
<
router-link對應點,router-view對應顯示部分。router-link 就是定義頁面中點選的部分,如我們的按鈕點選，按鈕就需要定義在 router-link中， route-link 屬性 to 定義點選之後要去哪裡
router-view 定義顯示部分，就是點選後，要顯示的内容碩 ，定義點選之後，要到哪裡去
<
3 在vue 項目中使用 vue-router 路由
import
需要注意的是 這裡的 import router 的router 一定要寫成 router，如果寫成其他的，比如下面這樣寫
import
那麼在加載運作時會報錯
[Vue warn
如下圖所示
上述代碼中，我們引入了App.vue檔案，那麼在src目錄下的App.vue檔案中
<
在上述代碼中，我們通過 router-link 配制路由，觸發路由後，将對應的内容頁面加載顯示在 router-view 中。 對于我們引入的test_router.js檔案，在src目錄下的test_router.js檔案中
///引入 VueRouter
那麼在這裡我們引入的 test_home.vue 與 text_login.vue 隻是普通的頁面元件
然後打開浏覽器控制台,如下圖所示
可以看到 router-link 标簽渲染成了 a 标簽，to 屬性變成了a 标簽的 href 屬性。
編譯成的 a 标簽有一個樣式類 .router-link-active ，當router-link 處于選中狀态時，vueRouter 會自動添加這個類，當不被選中時，vueRouter 會自動去除它。
完畢，有疑問可留言溝通