A. 什麼是路由路由分為哪兩類
提到路由，大家一般會想到生活中常見的路由器，路由器主要用於連接多個邏輯上分開的網路，邏輯網路代表-個單獨的網路或者一個子網，可以通過路由器功能來完成不同網路之間數據的傳遞。在Vue中也引人了路由的概念，因此，我們先來對程序開發中的路由進行簡單地了解。
程序開發中的路由分為後端路由和前端路由，下面我們分別進行簡要介紹。
1. 後端路由
後端路由通過用戶請求的URL分發到具體的處理程序，瀏覽器每次跳轉到不同的URL都會重新訪問伺服器。伺服器收到請求後，將數據和模板組合，返回HTML頁面，或者直接返回HTML模板，由前端JavaScript程序再去請求數據，使用前端模板和數據進行組合生成最終的HTML頁面。下圖演示了後端路由的工作原理。
2. 前端路由
前端路由就是把不同路由對應不同的內容或頁面的任務交給前端來做。前端路由和後端路由的原理是類似的，但是實現的方式不一樣。對於單頁面應用(Single Page Application, SPA)來說，主要通過URL中的hash(#號)來實現不同頁面之間的切換。hash有一個特點，就是HTTP請求中不會包含hash相關的內容,所以單頁面程序中的頁面跳轉主要用hash來實現。
下圖演示了前端路由的工作原理。
在上圖中，index.html 後面的『#home」是hash方式的路由，由前端路由來處理，將hash值與頁面中的組件對應，當hash值為「#/home」 時，就顯示「首頁」組件。前端路由在訪問一個新頁面的時候僅僅是變換了一下hash值而已，沒有和服務端交互，所以不存在網路延遲，提升了用戶體驗。
B. 前端路由和後台路由有什麼區別
區別在於express是伺服器端的路由，也就是說需要向後台伺服器發送請求，然後伺服器來決定來render那個.html，這也就是最早的mvc架構模式，而前端的路由是將這一過程放在瀏覽器端，也就是前台寫js代碼控制，不在請求伺服器，前台一般利用histroy和hash來控制，達到不刷新頁面可以使顯示內容發生變化，這樣好處是js代碼不發生變化(瀏覽器端可以維護一個穩定的model)；一般單頁應用就是前台來控制路由，這樣速度更快，用戶體驗更好。單頁應用還將模板拿到了瀏覽器端，從而解放了服務端，服務端趨於服務化。
C. 前端路由(二)
前面我們做到了切換路由不發送請求，現在我們要 把路由和組件對應起來達到渲 染。
接下來介紹的是VueRouter的原理，它是怎麼做到的這個功能的。其會在 根Vue 上注冊2個全局 函數式組件 <router-link> <router-view>，在根Vue原型上 定義$route(當前路由Route對象)和$router(傳入newVue的router對象列表)兩個屬性(所有子Vue實例會繼承)。
<router-link>，作為一個子組件，初始化渲染時會去執行render函數，主要做了 其 內部屬性 (tab標簽,activeClass等)的 處理 ，在點擊時會去 執行router.push做url變化 。它不涉及渲染，邏輯比較簡單。
執行router.push(replace)做url變化和初始化VueRouter時都會去觸發 transitionTo方法做路徑切換 。這個方法里做了很多事情，接下來會介紹。它執行完畢的成功回調中會切換url。
最重要的問題是渲染組件 ， <router-view>如何知道去渲染哪個組件 ？我們手頭有一個按文檔規定寫的new VueRouter({ routers })列表,傳給了根Vue，VueRouter通過它做了很多事情。
首先在new VueRouter()時,會去執行其構造函數,其中 createMatcher 方法,會遞歸遍歷routers把每個router對象進行重新描述得到 RouteRecord 對象，並由它們得到3個列表( pathList (路由path列表), pathMap (路由path: record列表), nameMap (路由name:record列表))，這3個列表是為導航守衛服務的我們先不管它。createMatcher最後返回2個方法，1、 addRoutes ，動態對上面3個列表修改。2、 match ，根據傳入的位置和當前的路徑，計算出新的路徑為 Route對象。
transitionTo路徑切換時，會去執行 match 函數計算新路徑Route對象，其有一個屬性值 matched ，是從當前RouteRecord向上(parent)查找直到根RouteRecord的到的RouteRecord數組，這樣得到一個 層級關系 。我們在<router-view>的render函數中會標志flag表示是router-view組件，我們上(父組件)查找有flag標志就 會把 depth++，最後得到 當前<router-view>的深度 。我們通過 $route.matched [depth]就可以 找到router-view需要去渲染的組件。
這里還有一個問題， 我們怎麼知道當前$route是哪個？ 在初始化routerVue，init()中規定了所有子組件的實例的$route屬性指向根Vue的$route屬性，根Vue的$route屬性又等於this._router.history.current。而current這個值又是在路徑切換時會變化的。也就是說我們路徑變化會把當前$route指為當前組件路由的route路徑對象，這個我們不用擔心。
概括： 就是做路徑切換時，我們會根據我們寫的路由表，把當前路由往上到根路由的路由對象組成一個數組，描述一個 層級關系List 。<router-view>是函數式組件，它有標志flag，我們也會從它往上查找<router-view>直到根vue，有就depth++，得到當前<router-view> 層級位置depth 。 List[depth].component就是我們要渲染的組件。
我們知道<router-view>要去渲染哪個組件，它是怎麼做到更新視圖的？ 更新視圖肯定也要符合Vue渲染原理呀，要把1個數據響應式化，get時收集訂閱者Watcher並初始化渲染，set時派發更新 把訂閱該數據的Watcher重新渲染。這個響應式數據是誰呢？就是定義在根Vue的_route，子Vue的$route也都指向它。<router-view>函數render執行的時候，會去取$route相當於訪問根Vue的_route，會觸發訂閱者Watcher收集並初始化渲染。做路徑切換時，會修改_route(即記錄當前路由路徑的this._router.history.current)。
觸發點 ：router-link 提供了"下一個位置參數"，准備去切換url時，觸發transitionTo方法去做路徑切換。
響應式化數據 ：history.current。記錄當前路徑Route對象(由當前路由和下一個位置計算出來)，收集訂閱者，派發更新渲染，都圍繞它進行。
路由配對組件 ：當前路徑Route對象(由當前路由和下一個位置 計算出來)和我們寫的路由表，得到當前路徑Route對象到根路徑的 路由路線 數組，<router-view>肯定在這之內，不會比其更深層，所以在這數組之內可以用depth取到。
守衛導航是怎麼做到的 ？守衛導航就是transitionTo方法做路徑切換時執行的一系列鉤子函數。
這些鉤子函數 有些定義在全局 ，用 this.router.xxx可以取到。
有些定義在組件內 ，通過前面的Routed.matched，即將離開路由的matched列表和當前路由的matched列表，從頭對比到第一個不同，得到 updated (目標RouteRecord和當前RouteRecord相同，前面重復的部分)、 activated( 目標RouteRecord和當前RouteRecord不同，後面不同的部分 ) 、 deactivated( 當前RouteRecord和目標RouteRecord不同，後面不同的部分 ) 三個RouteRecord數組。 通過這些RouteRecord去取定義在組件中的導航守衛 。
有些定義在路由中 ，也通過這些 RouteRecord去取。
到這里就完成了，接下來會分析前端路由在實際開發中的運用，比如頁面許可權設置！
D. 前端路由（1）：基礎知識
URI： Uniform Resource Identifier 統一資源標識符； 由5部分組成：
URI = scheme:[//authority]path[?query][#fragment]
scheme： 協議 常見的有 http , https , file等
authority: 可以由三部分組成 [userinfo]host:[port]
其中userinfo指用戶信息，可以通過authority中的userinfo進行的登錄（當然現在前端應用並不會這么做）
host指的是主機地址，可以是ipv4或者是用方括弧括起來的ipv6地址，或者是可以通過DNS解析成ip地址的域名，如www..com
port指埠號， 如果不指定則使用默認埠號，http默認埠號80， https默認埠號443
path: 指文件路徑，指定伺服器上文件路徑以訪問特定資源
query： 查詢字元串 又稱search值 get介面傳參會通過此部分進行傳輸
fragment： 片段標識符 又稱hash值， 通常用於標記已獲取資源的子資源，不會被傳遞到伺服器端
關於編碼：
URI是用的是百分號編碼，對於需要編碼的字元，將其表示為2個十六進制的字元，然後在其前面加入轉義字元%
兩個編碼api：
encodeURI 與 encodeURIComponent： encodeURI編碼的范圍比encodeURIComponent要小 ，其中encodeURI是w3c的標准。
window.history對象存在很多屬性， 比較重點關注的有：
readonly length: number;
readonly state: any;
方法：
pushState(state: any, title: string, url?: string | null) : void;
replaceState(state: any, title: string, url?: string | null) : void;
go(delta: number): void 與 back():void; forward():void;
第一個參數需要是可被結構化復制的數據類型， （結構化復制： 可以處理循環引用的JSON），會持久化存儲在瀏覽器內部，在每次頁面生成的時候會被重新提取出來（屬於瀏覽器實現的深拷貝）
第二個參數title傳字元串，用於標記當前方法
第三個參數url，可以傳簡單字元串，也可以傳url對象，需要注意的是因為此方法被同源策略所限制，url必須與當前href同源，否則會報錯。此參數可以不傳，不傳的時候就是單純的操作瀏覽器歷史棧。
方法作用： 生成一個新的歷史棧並將指針指向它，操作並不會刷新瀏覽器，也就是說此方法會改變瀏覽器的歷史棧length，和state對象；
replaceState與pushState參數完全相同，使用方法類似，但其作用是替換當前歷史棧，也就是說歷史棧的指針與長度不會發生變化，其作用僅僅是替換當前的url與state。
pushState與replaceState方法其url傳參方式多種多樣，可以是絕對路徑，也可以是相對路徑，也可以傳遞查詢字元串search值"?xxx"與片段標識符"#xxx"，其最大特點是操作瀏覽器url，history對象的state與length屬性，但不會觸發瀏覽器跳轉。
pushState與replaceState方法以相對路徑方式進行操作url的時候，會受到當前html的<base>元素的href的影響，此時base元素的href會替換瀏覽器的url的href作為基準值進行相對路徑跳轉。
瀏覽器的跳轉方法主要圍繞window.location與window.history這兩個對象進行。
1) window.history
window.history.go(delta: number): void;
移動瀏覽器歷史棧指針並且刷新頁面
window.history.back() === window.history.go(-1)
window.history.forward() === window.history.go(1)
2) window.location
window.location.href
get :() =>string;
set : (url: string) => void; // 觸發瀏覽器跳轉 並增加歷史棧 不收同源策略限制
window.location.hash
get: () => string;
set: (hash: string) => void;
與href類似，其區別是用於修改瀏覽器導航欄url的hash值，會產生新的歷史棧，但不會觸發瀏覽器頁面刷新，並且在set hash值與當前url的hash值相同時，不會有任何事發生（等於沒執行）。
window.location.replace
這是一個純方法，其作用是替換當前瀏覽器的棧記錄，設置為傳入新的URL，並且刷新頁面。
replace可以對hash進行操作並且觸發對應的事件，不會受相同hash的規則影響
1） popstate事件
history.pushState與history.replaceState產生的歷史棧記錄中，如果棧指針發生了移動，或者點擊了瀏覽器的前進或者回退按鈕時，會觸發popstate事件，可以通過window.addEventListener去添加事件監聽。
popstate拿到的event對象最關鍵的屬性是event.state，這個event.state是直接從瀏覽器底層存儲器中取出（屬於深拷貝），而非從歷史棧中的state取出，因此直接修改歷史棧state並不會對event.state造成影響（反之亦然）。
前後兩次設置相同的location.hash時不會觸發兩次popstate事件，但是通過location.href設置兩次相同的hash可以，雖然可以觸發兩次popstate事件，但是歷史棧只會增加一層。
2）hashchange事件
hashchange時間監聽的是瀏覽器url的片段標識符的變化，也就是hash值的變化，事件對象event可以拿到關鍵的oldUrl和newUrl，表示hash跳轉前的url和跳轉後的url。
pushState方法即使是只改動了瀏覽器的hash值，也不會觸發hashchange事件。
這兩個事件都可以通過window.dispatchEvent方法去觸發，dispatchEvent方法需要傳入一個事件對象：
window.dispatchEvent(new PopStateEvent());
對於hashchang事件同理：
window.dispatchEvent(new HashChangeEvent());
E. 前端路由 有沒有必要
web開發的傳統MVC路由是由後端動態伺服器控制的，你一個請求需要請求伺服器，會根據你在動態伺服器上設定的路由規則拼數據渲染頁面。前端路由是通過hash，也就是URL後面的#部分(可以通過一些框架稱的html5 mode重寫成常規的path)，你訪問的只是首頁，例如index.html，請求靜態資源伺服器，你依賴的SPA框架，根據你配置的前端路由規則，部分替換首頁結構實現前端路由，頁面的拼裝是在瀏覽器端做的，只是會向靜態資源伺服器拉取局部調整用的模板。
F. 前端有路由器如何連接hify
步驟1、連接線路。
由於HyFi智能無線路由器與HyFi智能無線擴展器之間的正常注冊需要使用到智能無線路由器的DHCP服務，因此對於前端有路由器的環境中，建議使用LAN-WAN級聯。
將前端的網線接入HyFi智能無線路由器的WAN口，電腦通過有線連接到HyFi智能無線路由器的LAN口或者無線連接HyFi智能無線路由器的無線信號。
步驟2、設置HyFi智能無線路由器的管理IP地址。
為避免由於和前端路由設備網段沖突導致HyFi智能無線路由器無法正常連接到前段網路，需要修改HyFi智能無線路由器的管理IP地址網段。
電腦登陸HyFi智能無線路由器的管理界面（默認地址為http://192.168.1.1），點擊「網路參數--LAN口設置」，修改IP地址為其他網段（例如192.168.2.1）後保存，設備將會重啟。
步驟3、注冊HyFi產品。
設置完HyFi智能無線路由器後，還需要將HyFi智能無線擴展器進行注冊才可以正常使用HyFi產品。
在設備都通電情況下，兩分鍾內分別按一下HyFi智能無線路由器TL-H18R和HyFi智能無線擴展器TL-H18E上的Config按鈕，待HyFi智能無線擴展器的指示燈由閃爍變為常亮時，即完成設備的注冊。
如果有多個HyFi智能無線擴展器，使用相同方法多次與HyFi智能無線路由器進行注冊即可。
G. 前端路由」有哪些優點和缺點
前端路由的優點和缺點：
優點
用戶體驗好，不需要每次都從伺服器全部獲取，快速展現給用戶
缺點
使用瀏覽器的前進，後退鍵的時候會重新發送請求，沒有合理地利用緩存
單頁面無法記住之前滾動的位置，無法在前進，後退的時候記住滾動的位置
H. ：前端路由是什麼東西
前端路由是不涉及伺服器的，是前端利用hash或者HTML5的history API來實現的，一般用於不同內容的展示和切換。
其實前端路由要做的就是兩點：
在頁面不刷新的情況下實現url的變化
捕捉url的變化，根據url更改頁面內容
I. Vue Router 前端路由實現思路
什麼是路由：滿足一對多的情況，主要是用來分發請求，經過一些中間節點後到達最終目的地。
路由通常根據路由表：一個存儲到各個目的地的最佳路徑的表來引導分組傳送。
hash模式： 任何情況下都能做前端路由
缺點：SEO不友好(伺服器收不到hash)
例如我們訪問.com/#1 或 .com/#marshall 或 .com/#anything 都相當於直接訪問.com
但是谷歌有對應的優化(雖然不能和傳統SEO媲美)，伺服器需要做一定的配置，有興趣自行搜索Google Hash SEO
history模式： 只有一種情況下可以使用——後端將前端路由都渲染到同一頁面(同一頁面不能是404，404的頁面是固定的)
IE8不支持
memory模式：
不改URL後綴，存在localStorage
適合非瀏覽器，例如在app里做路由，因為app里沒有路徑，
三者對比： history模式和hash模式是可分享的，而memory模式的缺點是沒有url，只對單機有效。
J. 什麼是"前端路由"什麼時候適合使用"前端路由""前端路由"有哪些優點和缺點
你的理解有錯誤，所謂的前端路由是為了和後端路由區分開。後端路由也叫做二級路由，三級路由！簡單舉個例子，你在光貓後面插的第一個路由器就叫做前端路由，它主管你連接在這台路由器上的其他所有路由器，也就是二級或者三級路由器，在家用領域這個概念基本不會使用！但在公司或者一些比較大的企業，前端路由器的功能決定你公司的其他電腦的功能，比如帶寬，認證，收費等！~