1. 前端為什麼要用路由 不用a標簽
步驟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智能無線路由器進行注冊即可。
2. 什麼是"前端路由"什麼時候適合使用"前端路由""前端路由"有哪些優點和缺點
你的理解有錯誤，所謂的前端路由是為了和後端路由區分開。後端路由也叫做二級路由，三級路由！簡單舉個例子，你在光貓後面插的第一個路由器就叫做前端路由，它主管你連接在這台路由器上的其他所有路由器，也就是二級或者三級路由器，在家用領域這個概念基本不會使用！但在公司或者一些比較大的企業，前端路由器的功能決定你公司的其他電腦的功能，比如帶寬，認證，收費等！~
3. 怎麼用page.js 前端路由
angularjs路由是指一款用angularjs前端語言設計出程序和框架的路由器1.AngularJS誕生於2009年，由MiskoHevery等人創建，後為Google所收購。是一款優秀的前端JS框架，已經被用於Google的多款產品當中。AngularJS有著諸多特性，最為核心的是：MVVM、模塊化、自動化雙向數據綁定、語義化標簽、依賴注入等等。2.路由器（Router），是連接網際網路中各區域網、廣域網的設備，它會根據信道的情況自動選擇和設定路由，以最佳路徑，按前後順序發送信號。路由器是互聯網路的樞紐，"交通警察"。目前路由器已經廣泛應用於各行各業，各種不同檔次的產品已成為實現各種骨幹網內部連接、骨幹網間互聯和骨幹網與互聯網互聯互通業務的主力軍。路由和交換機之間的主要區別就是交換機發生在OSI參考模型第二層（數據鏈路層），而路由發生在第三層，即網路層。這一區別決定了路由和交換機在移動信息的過程中需使用不同的控制信息，所以說兩者實現各自功能的方式是不同的。3.路由器（Router）又稱網關設備（Gateway）是用於連接多個邏輯上分開的網路，所謂邏輯網路是代表一個單獨的網路或者一個子網。當數據從一個子網傳輸到另一個子網時，可通過路由器的路由功能來完成。因此，路由器具有判斷網路地址和選擇IP路徑的功能，它能在多網路互聯環境中，建立靈活的連接，可用完全不同的數據分組和介質訪問方法連接各種子網，路由器只接受源站或其他路由器的信息，屬網路層的一種互聯設備。
4. 前端路由（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());
5. 什麼是前端路由
路由從字面上理解就是「由某某路徑」，前端的路由指的是設置一個名字，對應頁面路徑，從而可以通過訪問這個名字而訪問頁面。
滿意請採納！謝謝！
6. 什麼是路由路由分為哪兩類
提到路由，大家一般會想到生活中常見的路由器，路由器主要用於連接多個邏輯上分開的網路，邏輯網路代表-個單獨的網路或者一個子網，可以通過路由器功能來完成不同網路之間數據的傳遞。在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值而已，沒有和服務端交互，所以不存在網路延遲，提升了用戶體驗。
7. 前端路由和後端路由有什麼區別
組網級層的區別，主級路由次級路由之間的區別。
8. 前端路由(二)
前面我們做到了切換路由不發送請求，現在我們要 把路由和組件對應起來達到渲 染。
接下來介紹的是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去取。
到這里就完成了，接下來會分析前端路由在實際開發中的運用，比如頁面許可權設置！