這篇文章為大家總結分享一些vue-router的相關面試題（附答案解析），帶你整理基礎知識，增強vue-router知識儲備，值得收藏，快來看看吧！
在單一頁面應用程式中，不同元件之間的切換需要透過前端路由來實現。
前端路由
1.key是路徑,value是元件，用來展示頁面內容
2.工作過程:當瀏覽器的路徑改變時，對應的組件就會顯示。 vue-router的路由作用：將元件對應到路由, 然後渲染出來
vuejs影片教學、web前端開發
hash 是URL 中# 及後面的那部分，
window可以監聽onhashchange事件變更。當hash變化時，讀取
透過window.location改變URL
相容性好, 瀏覽器都能支援
html5 的history Interface 中新增的pushState() 和replaceState()
類似hashchange
事件的popstate 事件，但popstate 事件有些不同：
, 後端需要設定index.html頁面使用者不符合靜態資源的情況, 否則會出現404錯誤相容性比較差, 是利用了HTML5 History物件中新增的pushState()$route和$router有什麼不同？
| ##- | 描述 | 如何指定跳轉的路由 | 如果沒有傳參 | |
|---|---|---|---|---|
#params參數 | 路徑/params參數#必須使用name指定路由 | params是路由的一部分,如果在配置了佔位符必須要有如果這個路由有params傳參，但是在跳轉的時候沒有傳這個參數，會導致跳轉失敗或者頁面會沒有內容。 | 傳遞路徑上沒有的佔位符，地址列上不會顯示並且刷新會丟失||
query參數 |
params參數傳遞的時候，傳遞了設定佔位符接收的參數，位址列不會顯示並且刷新會遺失。
解決方案：可以透過this.$route.params來取得參數保存在本機
vue-router 提供的導航守衛主要用來透過跳轉或取消的方式守衛導航。
router.beforeEach() 全域前置守衛,每次導覽時都會觸發。 router.afterEach() 全域後置路由守衛,每次路由跳轉完成後。 不會接受next 函數，跳轉完成已經進入到元件內了router.beforResolve() 全域解析守衛，在路由跳轉前，所有元件內守衛和非同步路由元件 被解析之後觸發，它同樣在每次導航時都會觸發。解析完成後導航被確定，準備開始跳轉。 beforeRouteEnter() 路由進入元件之前調用，該鉤子在beforeEach 和beforeEnter 之後。 beforeCreate 生命週期前觸發。 beforeRouteUpdate() this 已經可用了，所以給 next 傳遞回呼就沒有必要了。對一個有動態參數的路徑/foo/:id,在/foo/1 和/foo/2之間跳轉的時候，由於會渲染統一的Foo元件，因此這個元件實例會被復用，這個鉤子在這種情況下可以被呼叫。 beforeRouteLeave()離開該元件時被呼叫,this 已經可用了，所以給 next 傳遞回調就沒有必要了。 beforeEnter() 需要在路由設定上定義beforeEnter 守衛，此守衛只在進入路由時觸發，在beforeEach 之後緊接著執行，不會在params、query 或hash 改變時觸發。 進入元件前的呼叫的順序beforeEach()=>beforeEnter()=>beforeRouteEnter()=>beforeResolve() 這個過程不可以使用this，因為元件實例還沒有被創建，所以需要利用next函數
完整的導航解析流程
# 1.導航被觸發。
2.在失活的元件裡呼叫 beforeRouteLeave 守衛。
3.呼叫全域的 beforeEach 守衛。
4.在重複使用的元件裡呼叫 beforeRouteUpdate 守衛。
5.在路由配置裡呼叫 beforeEnter。
6.解析非同步路由元件。
7.在被啟動的元件裡呼叫beforeRouteEnter。
8.呼叫全域的 beforeResolve 守衛。
9.導航被確認。
10.呼叫全域的 afterEach 鉤子。
11.觸發 DOM 更新。
12.呼叫 beforeRouteEnter 守衛中傳給 next 的回呼函數，建立好的元件實例會作為回呼函數的參數傳入。
keep-alive可以實作元件緩存，當組件切換時不會對目前組件進行卸載。
keep-alive標籤主要有include、exclude、max三個屬性
include、exclude 前兩個屬性允許keep-alive有條件的進行快取max可以定義元件最大的快取個數，如果超過了這個個數的話，在下一個新實例建立之前，就會以快取元件中最久沒有被存取的實例銷毀掉。 兩個生命週期activated/deactivated，用來得知目前元件是否處於活躍狀態。
特殊的卸載/掛載流程:activated/deactivated
# 快取管理:LRU(Least Recently Used)最近最少使用是一種淘汰演算法
特殊的卸載/掛載流程
由於不能將元件真正的卸載，所以keep-alive是將元件從原容器移到另一個假容器中，實現假卸載。掛載的時候從隱藏容器中再搬運到原容器。對應到元件的activated和deactivated生命週期
keepAlive會對內部元件(需要被快取的)進行標記
在內部元件的vnode物件上新增keptAlive屬性，如果元件已經緩存，添加標記，表示渲染器並不會重新掛載，直接啟動即可。
快取策略:最近最少使用
使用Map物件cache來實作元件的緩存， key是vnode.type值，value為vnode物件，因為元件的vnode物件中存在著元件實例的參考(vnode.component#)
cache 前者用來存快取元件的虛擬dom集合keys 後者用來儲存快取元件的key集合根據元件ID和tag產生快取Key，並在快取物件中尋找是否已快取過該元件實例。如果存在，直接取出快取值並更新該key在keys中的位置（更新key的位置是實現LRU置換策略的關鍵）。
如果不存在，則在map物件中儲存該元件實例並保存key值，之後檢查快取的實例數量是否超過max設定值，超過則根據LRU置換策略刪除最近最久未使用的實例（即是下標為0的那個key）。
以上是【整理分享】一些vue-router相關面試題（附答案解析）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
