手把手教Vue-路由「Vue-rouer」
1
教程簡介
1、閱讀對象
本篇教程適合新手閱讀，老手直接略過
2、教程難度
初級，本人水平有限，文章內容難免會出現問題，如果有問題歡迎指出，謝謝
3、Demo 地址:https://github.com/githubchen001/vue-lesson/tree/master/06、Vue路由
2
教程大綱
一、什麼是路由
前端路由和後端路由
前端路由的兩種實現方式 hash 和 h5 history
二、Vue-router
Vue-router 的簡單使用
手把手使用 Vue-router 完成 webapp
三、總結
3
正文
一、什麼是路由
以前在 React 的文章中說過路由這個東西，這裡再說一下「再次加深一下記憶」。路由是什麼我們可能不太理解，但是我說一個東西我們一定知道，就是」路由器」,路由器的功能用一句話概括就是：數據從一個網路到另一個網路就是靠路由來完成的[當然路由器的功能不僅僅於此]。
我們說的程序開發中的路由不是指路由器和網路協議中的路由，但是基本思想是一樣的。而路由又可以分為前端路由和後端路由。
我們來看一個路由的簡易圖吧，有了這個圖，大家對路由就有一個大致的了解了。
1、後端路由
舉個栗子，分配一個站點，伺服器地址是：，在這個網站中提供了三個界面
當我們在瀏覽器輸入 來仿問界面的時候，web 伺服器就會接收到這個請求，然後把 index.html 解析出來，並找到相應的 index.html 並展示出來，這就是路由的分發，路由的分發是通過路由功能來完成的
2、前端路由
雖然前端路由和後端路由的實現方式不一樣，但是原理都有是相同的，在 H5 的 history Api 出來之前，前端路由的功能都是通過 hash 「散列值」 來實現的，hash 能兼容低版本的瀏覽器
PS:後端路由每次仿問一個頁面都要向瀏覽器發送請求，然後服務端再響應解析，在這個過程中肯定會存在延遲，但是前端路由中仿問一個新的界面的時候只是瀏覽器的路徑改變了，沒有和服務端交互「所以不存在延遲」，這個對用戶體驗來說是大大的提高。如下所示
3、舉個栗子
假設有一個地址
1、我們把這個地址分析一下「這個地址基本上包含了一個複雜地址的所有情況」
上面的 hash 是和瀏覽器交互的，其它的都是和伺服器進行交互
通過上述我們知道，前端路由的實現方式有兩種：
（1）、一是改變 hash 值，監聽 hashchange 事件，可以兼容低版本瀏覽器
（2）、二是通過 H5 的 history API 來監聽 popState 事件，使用 pushState 和 replaceState 實現
2、hash 改變，不會導致瀏覽器刷新「請求伺服器」，我們來寫個 demo 驗證一下
先看一下效果圖
從圖中我們可以看到，使用 hash 並不會導致瀏覽器刷新,並且我們 js 拿到了 hash 值並且列印出來了
3、源碼
以上代碼只是為了演示前端路由的作用，一般情況下，這種路由我們是不需要自己寫的，使用 react/vue 都會有相應的路由工具類,我們發現了 hash 只會改變瀏覽器地址，不會刷新瀏覽器
H5 的 history
window 的 history 提供了對瀏覽器歷史記錄的訪問功能，並且它暴露了一些方法和屬性，讓你在歷史記錄中自由的前進和後退，並且在 H5 中還可以操作歷史記錄中的數據。
我們在 chrome 瀏覽器的調試窗口中在 Console 中輸入 window.history,會得到 history 的一些方法和屬性，如下圖所示
總結一下 history 的 API 如下：
1、在歷史記錄中後退
2、在歷史記錄中前進
3、移動到指定的歷史記錄點
其中正數是前進「+1就是前進一個界面」，負責是後退的意思「-1就是後退一個界面」
4、 hisgory 的屬性，顯示 history 的長度
5、給歷史記錄堆棧頂部添加一條記錄
如果想更進一步的了解 H5 的 history ，推薦看這裡:https://developer.mozilla.org/en-US/docs/Web/API/History_API，非常值得一看
從上面我們了解到，使用 H5 的 history 的 pushState 可以代替 hash，並且更加優雅,廢話不多說，我們直接上效果圖
從效果圖中我們可以看到前端路由實現了，點擊各個導航沒有刷新瀏覽器，並且點擊瀏覽器的回退按鈕，會顯示上一次記錄，這都是使用 h5 history 的 pushState 和監聽 onpopstate 實現的，這就是一個簡單的 SPA ,基本上實現了和上面 hash 一樣的功能
源碼「我們只看核心代碼」
以上就是通過 H5 的 history 實現的一個前端路由
我們稍微總結一下：
後端路由：每次仿問都要向 server 發送一個請求，server 需要響應解析，會有延遲「網路不好更嚴重」
前端路由：只是改變瀏覽器的地址，不刷新瀏覽器，不和服務端交互，所以性能有大大的提高「用戶體驗提高」，並且前端路由有兩種實現方式
(1)、實現 hash 並監聽 hashchange 事件來實現
(2)、使用 H5 的 hisgory 的 pushState() 監聽 popstate 方法來實現
到這裡，我們大概對路由有一個整體的了解了,下面我們看看 veu 的路由
二、Vue 路由
Vue 中的路由，推薦使用官方支持的vue-router庫，當然我們可以不使用 vue-router 可以使用三方的路由庫，或者自己牛 b 完全可以自己寫一個路由庫「使用 hash 或 history」
本文中我們使用 vue-router 3.0.1來講解，考慮到團隊開發協作，我們先寫一個使用 html 引入 vue.js 的方式來使用 vue-router,後面專註說使用模塊化開發「使用 vue-cli 創建項目中使用 vue-router,這應該是團隊開發的最佳方式」
html 中 引入 vue-router
1、廢話不多了，直接寫一個簡單的 SPA 應用來感受一下
效果如下：
從上圖中我們可以看到，我們使用 vue-router 實現了一個簡單的類 hash 的路由功能
2、源碼
1、引入 vue.js 和 vue-router.js
2、定義 Main、Message、Mine 組件
3、聲明路由規則
聲明路由規則，把路徑所對應要跳轉的組件先定義出來「相當於一個配置項」，到時候瀏覽器地址指定到對應的路由下會自動跳轉到所對應的組件「這樣就完成了路由功能」
4、創建 router 實例
創建 router 實例，並把 routes 傳遞進去
5、註冊 router「把 router 注入到指定的掛載點下」
經過以上幾步，路由功能就完成了，我們現在定義了路徑，定義了路由所對應的組件，那組件要顯示在哪裡呢？那就前面 1 中的圖中所顯示的 中
可是如何讓我在點擊不同的按鈕進不同的路由「不是的組件呢？」，這裡就要使用到 ，從名字就可以看出來就是路由鏈接到那個路徑，路徑會匹配出相應的組件顯示在 中
這樣我們就完成了 vue-router 的基本使用，使用聲明式導航 「其實就是創建了一個 a 標籤」來完成了導航的鏈接
模塊化「組件式開發」中 vue-router 的使用
如果使用 vue 開發手機 webapp ，那麼頁面跳轉就非常多，路由使用的非常非常多，這樣就更能體現出路由的強大之處，在這裡我們使用 vue-cli 來創建一個 webapp ,來模擬一個簡單的手機 app ，體驗一下路由
效果如下：
1、初始化項目
使用 vue-cli 命令創建項目的時候，我們選擇安裝 vue-router，默認進去項目中就會有 vue-router 的配置，創建好的項目結構如下：
我們看到創建的目錄結構多了一個 router 目錄和 index.js 文件「vue-cli默認給添加的，如果你選了安裝 vue-router 的話」
2、文件簡單的分析
我們來看看 router 下的 index.js「路由配置文件」
我們可以看到默認 vue-cli 創建的帶路由的項目把 router 配置文件單獨的寫在了 router/index.js 文件中了，並且我們看到默認指定打開的是 HelloWorld 組件「想配置路由組件，引入組件配置即可」
再看 main.js
一般來說 APP.vue 就是我們應用的首頁，我們在 main.js 中注入路由，從而讓整個應用都具有路由功能
3、再看 App.vue
核心就一個 即可路由組件要顯示的地方，默認路由路徑是 / 對應的是 HelloWorld 組件，所以運行起應用就會顯示 HelloWorld 組件，這裡不顯示運行後的結果了，我們使用 vue-cli 創建的 demo 樣式看的太多了，自行運行查看即可
經過以上分析，我們基本上就把 vue-cli 帶路由的 demo 說完了「核心就這幾個東西，剩下的無非就是配置路由，然後組件組合，然後各種路由跳轉」
4、修改 demo，一步步修改成效果圖的樣式
添加 First.vue 文件「核心代碼」
樣式和數據「mockList 就是一個數組」就不截圖了，完整例子可以查看 源碼:https://github.com/githubchen001/vue-lesson/tree/master/06、Vue路由/vue-cli-router-webapp
其中的條目點擊方法 就是路由跳轉功能
以上點擊方法我們使用編程式導航「跳轉」,當然你也可以不傳參數
細心的朋友會發現,我們這個 name 叫second這是那裡來的,它其實就是我們在 router/index.js 中配置的別名,再看 router/index.js 文件之前,我們先添加一個 Second.vue 組件
添加 Second.vue 組件「核心代碼
這個沒有什麼好說的,就是一個有導航條並且接收到 First.vue 路由跳轉傳遞過來的參數
修改 router/index.js 文件
前面我們使用跳轉 中傳了一個 name 為 second ,我們說了這是在 router/indes.js 中配置的,下面我們來看此文件
我們看到 / 對應的是 First 組件,/second 對應的是 Second 組件,並且分別給了 name 屬性「在路由 push 的時候就可以使用到」,沒什麼好說的,當然你也可以不寫 name 屬性，路由跳轉有幾種寫法
等幾種方式,如果有 name 屬性直接使用即可,如果沒有就使用 path「router/inde.js 中配置的路由 path」 即可,具體可以看官網:https://router.vuejs.org/zh-cn/essentials/navigation.html
如果想返回上一個界面,那麼就使用 和 h5 的 history 是一樣的
修改 App.vue
我們來修改 App.vue 來讓每個組件的內容都能全屏顯示「我這裡使用的 flexbox 布局,具體看源碼」
這沒有什麼好說的,都是一些 css 樣式的設置
運行查看效果
從效果圖中我們可以看到我們已經實現了兩個界面之間的跳轉「通過路由功能」只不過這個界面跳轉有點生硬，顯的很不友好，下面我們給界面跳轉添加一個動畫
添加界面跳轉動畫
說到 vue 的跳轉動畫，我們就要說說 transition 過度效果，簡單的說 transition 就是控制組件或標籤的進入和離開的過度「這裡不過多的介紹，我們看如何修改代碼
修改 App.vue
第一步：給 router-view 添加過慮效果
第二步：給 transitionName 設置個屬性值
在這裡我們給 transitionName 設置一個值「這個值可以隨便起一個名字，這裡我就叫做 slide-right,向右滑動」
第三步：給 transitionName 添加進入，退出效果
這裡我們給過度設置效果，一般使用 name-enter「過渡開始的狀態」 name-enter-active「定義進入過渡的狀態」、name-leave「離開過渡的開始狀態」、name-leave-active「離開的過度狀態」，其中 name 是可以的值是可以動態設置的，類如上面的 slide-right 和 slide-left，但是後面的部分是固定的，下面我們來使用 name
第四步：監聽路由變化
我們先把路由定義一個統一的返回方法，打開 router/index.js，添加如下代碼，使用 js 的 prototype「prototype 屬性使您有能力向對象添加屬性和方法」 屬性即可
這樣一來，router 就有了統一的返回方法，直接調用即可，我們修改返回按鈕的返回方法如下：
第五步：監聽路由變化
在這裡我們使用到了 Vue 的 watch「這裡不專門說，以後有需要會抽出來說」 方法，修改如下：
這樣我們就可以監聽是進入界面還是返回界面「這裡 watch 和 data 方法是平級的，如果是返回的話，則從左邊滑入到右邊，打開新界面就是從右邊滑到左邊」
通過以上步驟，我們就給路由添加了一個過渡效果，我們來看看效果，就和剛開始的效果圖是一樣的
這樣我就完成了組件式開發中的路由的基本功能，結束了嗎？這裡本應該可以結束了，但是我們前面學過組件，並且 vue 的核心特點之一就是組件化開發，我們這裡使用的頭部功能「兩個界面頭部如下」
我們可以看到兩個界面的頭部是何其的相似，這裡我們完全可以把這個頭部封裝成一上組件呀，下面我們繼續改造我們的代碼
封裝頭部組件
1、新建一個 Head.vue 文件「核心代碼」
2、在 First.vue 和 Second.vue 中引入
分三步：
第一步：引入組件
第二步：註冊組件
第三步：使用組件
想在那個 vue 組件中使用以上三步就可以搞定了
到這裡我們就把 head 組件封裝完成了，並且達到使用的上的，具體可以看源代碼
到此為止，我們把 vue-router 就介紹完了，總結一下
三、總結
路由的分類：前端路由和後端路由「區別和聯繫」
使用 hash 和 history 分別實現前端路由
vue-router 的基本使用方法「使用 html 引入和模塊化開發兩種方式」
vue-router 的舉例子「手機端開發 webapp」
源碼：回復路由源碼四個字即可獲取
點贊是一種美德，轉發富五代
更多文章等著你，歡迎關注我的公號
TAG:TigerChain |