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

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

vue-router的原理

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

前端路由

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

##主要就是

• 如何改變URL卻不引起頁面刷新

• 如何偵測到URL變化了 【相關推薦：

  vuejs影片教學、web前端開發

】

#路由的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參數傳遞的幾種方式，有什麼差別?可以傳參沒有要求的值嗎路徑/params參數params是路由的一部分,如果在配置了佔位符必須要有傳遞路徑上沒有的佔位符，地址列上不會顯示並且刷新會丟失

	##-	描述	如何指定跳轉的路由	如果沒有傳參
	#params參數		#必須使用name指定路由	如果這個路由有params傳參，但是在跳轉的時候沒有傳這個參數，會導致跳轉失敗或者頁面會沒有內容。
	query參數

#### ####路徑? key1=val1 & key2=val2....#########1.可以使用name指定路由###2.可以使用path指定路由######query是拼接在url後面的參數，沒有也沒關係######query不會#############

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）。

（學習影片分享：vuejs入門教學、程式設計基礎影片）

以上是【整理分享】一些vue-router相關面試題（附答案解析）的詳細內容。更多資訊請關注PHP中文網其他相關文章！