【整理分享】一些vue-router相關面試題（附答案解析）

本篇文章給大家總結分享一些vue-router的相關面試題（附答案解析），帶你梳理基礎知識，增強vue-router知識儲備，值得收藏，快來看看吧！

vue-router的原理

在單頁面應用中，不同元件之間的切換需要通過前端路由來實現。

前端路由

1.key是路徑,value是元件，用於展示頁面內容
2.工作過程:當瀏覽器的路徑改變時，對應的元件就會顯示。
vue-router的路由作用：將元件對映到路由, 然後渲染出來

主要就是

• 如何改變URL卻不引起頁面重新整理

• 如何檢測到URL變化了 【相關推薦：、】

路由的hash模式

• hash 是 URL 中 # 及後面的那部分，#後的url不會傳送到伺服器，所以改變 URL 中的 hash 部分不會引起頁面重新整理

• window可以監聽onhashchange事件變化。當hash變化時，讀取#後的內容，根據資訊進行路由規則匹配，通過改變 window.location.hash 改變頁面路由。

改變URL的三種方式

• 通過瀏覽器前進後退改變 URL
• 通過標籤改變 URL
• 通過window.location改變URL

優點

• 只需要前端設定路由表, 不需要後端的參與
• 相容性好, 瀏覽器都能支援

• hash值改變不會向後端傳送請求, 完全屬於前端路由

缺點

• hash值前面需要加#, 不符合url規範,也不美觀

路由的history模式 - 利用H5的history API

• html5 的history Interface 中新增的pushState() 和 replaceState() 方法，用來在瀏覽歷史中新增和修改記錄，改變頁面路徑，使URL跳轉不會重新載入頁面。

• 類似hashchange 事件的 popstate 事件，但 popstate 事件有些不同：
  只有在做出瀏覽器的行為才會呼叫 popState，使用者點選瀏覽器倒退按鈕和前進按鈕，或者使用 JavaScript 呼叫History.back()、History.forward()、History.go()方法時才會觸發。

優點

• 符合url地址規範, 不需要#, 使用起來比較美觀

缺點

• 在使用者手動輸入地址或重新整理頁面時會發起url請求, 後端需要設定index.html頁面使用者匹配不到靜態資源的情況, 否則會出現404錯誤
• 相容性比較差, 是利用了 HTML5 History物件中新增的 pushState() 和 replaceState() 方法,需要特定瀏覽器的支援.

$route和$router有什麼區別？

$router是VueRouter的範例物件,表示整個應用的唯一路由器物件。包含了路由跳轉的方法、勾點函數等。
$route是當前路由物件,表示本元件的路由規則，每一個路由都會有一個route物件，是一個區域性物件。

vue-router引數傳遞的幾種方式，有什麼區別?

vue-router引數丟失的問題

params引數傳遞的時候，傳遞了設定預留位置接收的引數，位址列不會顯示並且重新整理會丟失。

解決辦法：可以通過this.$route.params獲取引數儲存在本地

vue-router有幾種勾點函數？具體是什麼及執行流程是怎樣的？

vue-router 提供的導航守衛主要用來通過跳轉或取消的方式守衛導航。

• 全域性路由守衛 : 可以有多個根據建立順序呼叫。
  • router.beforeEach() 全域性前置守衛,每次導航時都會觸發。
  • router.afterEach() 全域性後置路由守衛,每次路由跳轉完成後。不會接受 next 函數，跳轉完成已經進入到元件內了
  • router.beforResolve() 全域性解析守衛，在路由跳轉前，所有元件內守衛和 非同步路由元件 被解析之後觸發，它同樣在 每次導航 時都會觸發。 解析完成後導航被確定，準備開始跳轉。
• 元件內路由守衛
  • beforeRouteEnter() 路由進入元件之前呼叫，該勾點在beforeEach 和 beforeEnter 之後。
    此時還沒有進入元件，元件範例還沒有被建立。所以不能獲取元件範例，此時 this 為 undefined，在 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可以實現元件快取，當元件切換時不會對當前元件進行解除安裝。

keep-alive標籤主要是有include、exclude、max三個屬性

• include、exclude 前兩個屬性允許keep-alive有條件的進行快取
• max可以定義元件最大的快取個數，如果超過了這個個數的話，在下一個新範例建立之前，就會將以快取元件中最久沒有被存取到的範例銷燬掉。

兩個生命週期activated/deactivated，用來得知當前元件是否處於活躍狀態。

keep-alive的原理 快取管理+特殊的掛載/解除安裝流程

特殊的解除安裝/掛載流程:activated/deactivated
快取管理:LRU(Least Recently Used)最近最少使用是一種淘汰演演算法

特殊的解除安裝/掛載流程
由於不能將元件真正的解除安裝，所以keep-alive是將元件從原容器移動到另外一個假容器中，實現假解除安裝。掛載的時候從隱藏容器中再搬運到原容器。對應到元件的activated和deactivated生命週期
keepAlive會對內部元件(需要被快取的)進行打標記

• 在內部元件的vnode物件上新增shouldKeepAlive屬性，告訴渲染器解除安裝元件時，該元件需要快取，不要真正解除安裝

• 在內部元件的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相關面試題（附答案解析）的詳細內容，更多請關注TW511.COM其它相關文章！