vue-router相關(guān)面試題及答案有哪些

這篇文章主要介紹“vue-router相關(guān)面試題及答案有哪些”，在日常操作中，相信很多人在vue-router相關(guān)面試題及答案有哪些問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”vue-router相關(guān)面試題及答案有哪些”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

vue-router的原理

在單頁(yè)面應(yīng)用中，不同組件之間的切換需要通過(guò)前端路由來(lái)實(shí)現(xiàn)。

前端路由

1.key是路徑,value是組件，用于展示頁(yè)面內(nèi)容
2.工作過(guò)程:當(dāng)瀏覽器的路徑改變時(shí)，對(duì)應(yīng)的組件就會(huì)顯示。
vue-router的路由作用：將組件映射到路由, 然后渲染出來(lái)

主要就是

• 如何改變URL卻不引起頁(yè)面刷新

• 如何檢測(cè)到URL變化了

路由的hash模式

• hash 是 URL 中 # 及后面的那部分，#后的url不會(huì)發(fā)送到服務(wù)器，所以改變 URL 中的 hash 部分不會(huì)引起頁(yè)面刷新

• window可以監(jiān)聽onhashchange事件變化。當(dāng)hash變化時(shí)，讀取#后的內(nèi)容，根據(jù)信息進(jìn)行路由規(guī)則匹配，通過(guò)改變 window.location.hash 改變頁(yè)面路由。

改變URL的三種方式

• 通過(guò)瀏覽器前進(jìn)后退改變 URL

• 通過(guò)標(biāo)簽改變 URL

• 通過(guò)window.location改變URL

優(yōu)點(diǎn)

• 只需要前端配置路由表, 不需要后端的參與

• 兼容性好, 瀏覽器都能支持

• hash值改變不會(huì)向后端發(fā)送請(qǐng)求, 完全屬于前端路由

缺點(diǎn)

• hash值前面需要加#, 不符合url規(guī)范,也不美觀

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

• html5 的history Interface 中新增的pushState() 和 replaceState() 方法，用來(lái)在瀏覽歷史中添加和修改記錄，改變頁(yè)面路徑，使URL跳轉(zhuǎn)不會(huì)重新加載頁(yè)面。

• 類似hashchange 事件的 popstate 事件，但 popstate 事件有些不同：
  只有在做出瀏覽器的行為才會(huì)調(diào)用 popState，用戶點(diǎn)擊瀏覽器倒退按鈕和前進(jìn)按鈕，或者使用 JavaScript 調(diào)用History.back()、History.forward()、History.go()方法時(shí)才會(huì)觸發(fā)。

優(yōu)點(diǎn)

• 符合url地址規(guī)范, 不需要#, 使用起來(lái)比較美觀

缺點(diǎn)

• 在用戶手動(dòng)輸入地址或刷新頁(yè)面時(shí)會(huì)發(fā)起url請(qǐng)求, 后端需要配置index.html頁(yè)面用戶匹配不到靜態(tài)資源的情況, 否則會(huì)出現(xiàn)404錯(cuò)誤

• 兼容性比較差, 是利用了 HTML5 History對(duì)象中新增的 pushState() 和 replaceState() 方法,需要特定瀏覽器的支持.

$route和$router有什么區(qū)別？

$router是VueRouter的實(shí)例對(duì)象,表示整個(gè)應(yīng)用的唯一路由器對(duì)象。包含了路由跳轉(zhuǎn)的方法、鉤子函數(shù)等。
$route是當(dāng)前路由對(duì)象,表示本組件的路由規(guī)則，每一個(gè)路由都會(huì)有一個(gè)route對(duì)象，是一個(gè)局部對(duì)象。

vue-router參數(shù)傳遞的幾種方式，有什么區(qū)別?

vue-router參數(shù)丟失的問(wèn)題

params參數(shù)傳遞的時(shí)候，傳遞了設(shè)置占位符接收的參數(shù)，地址欄不會(huì)顯示并且刷新會(huì)丟失。

解決辦法：可以通過(guò)this.$route.params獲取參數(shù)保存在本地

vue-router有幾種鉤子函數(shù)？具體是什么及執(zhí)行流程是怎樣的？

vue-router 提供的導(dǎo)航守衛(wèi)主要用來(lái)通過(guò)跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。

• 全局路由守衛(wèi) : 可以有多個(gè)根據(jù)創(chuàng)建順序調(diào)用。

• router.beforeEach() 全局前置守衛(wèi),每次導(dǎo)航時(shí)都會(huì)觸發(fā)。

• router.afterEach() 全局后置路由守衛(wèi),每次路由跳轉(zhuǎn)完成后。不會(huì)接受 next 函數(shù)，跳轉(zhuǎn)完成已經(jīng)進(jìn)入到組件內(nèi)了

• router.beforResolve() 全局解析守衛(wèi)，在路由跳轉(zhuǎn)前，所有組件內(nèi)守衛(wèi)和 異步路由組件 被解析之后觸發(fā)，它同樣在 每次導(dǎo)航 時(shí)都會(huì)觸發(fā)。 解析完成后導(dǎo)航被確定，準(zhǔn)備開始跳轉(zhuǎn)。

• 組件內(nèi)路由守衛(wèi)

• beforeRouteEnter() 路由進(jìn)入組件之前調(diào)用，該鉤子在beforeEach 和 beforeEnter 之后。
  此時(shí)還沒(méi)有進(jìn)入組件，組件實(shí)例還沒(méi)有被創(chuàng)建。所以不能獲取組件實(shí)例，此時(shí) this 為 undefined，在 beforeCreate 生命周期前觸發(fā)。

• beforeRouteUpdate() this 已經(jīng)可用了，所以給 next 傳遞回調(diào)就沒(méi)有必要了。對(duì)一個(gè)帶有動(dòng)態(tài)參數(shù)的路徑 /foo/:id,在/foo/1 和/foo/2之間跳轉(zhuǎn)的時(shí)候，由于會(huì)渲染統(tǒng)一的Foo組件，因此這個(gè)組件實(shí)例會(huì)被復(fù)用，這個(gè)鉤子在這種情況下可以被調(diào)用。

• beforeRouteLeave()離開該組件時(shí)被調(diào)用,this 已經(jīng)可用了，所以給 next 傳遞回調(diào)就沒(méi)有必要了。

• 獨(dú)享路由守衛(wèi)

• beforeEnter() 需要在路由配置上定義 beforeEnter 守衛(wèi)，此守衛(wèi)只在進(jìn)入路由時(shí)觸發(fā)，在 beforeEach 之后緊隨執(zhí)行，不會(huì)在 params、query 或 hash 改變時(shí)觸發(fā)。

進(jìn)入組件前的調(diào)用的順序 beforeEach()=>beforeEnter()=>beforeRouteEnter()=>beforeResolve() 這個(gè)過(guò)程不可以使用this，因?yàn)榻M件實(shí)例還沒(méi)有被創(chuàng)建，所以需要利用next函數(shù)

完整的導(dǎo)航解析流程
1.導(dǎo)航被觸發(fā)。
2.在失活的組件里調(diào)用 beforeRouteLeave 守衛(wèi)。
3.調(diào)用全局的 beforeEach 守衛(wèi)。
4.在重用的組件里調(diào)用 beforeRouteUpdate 守衛(wèi)。
5.在路由配置里調(diào)用 beforeEnter。
6.解析異步路由組件。
7.在被激活的組件里調(diào)用 beforeRouteEnter。
8.調(diào)用全局的 beforeResolve 守衛(wèi)。
9.導(dǎo)航被確認(rèn)。
10.調(diào)用全局的 afterEach 鉤子。
11.觸發(fā) DOM 更新。
12.調(diào)用 beforeRouteEnter 守衛(wèi)中傳給 next 的回調(diào)函數(shù)，創(chuàng)建好的組件實(shí)例會(huì)作為回調(diào)函數(shù)的參數(shù)傳入。

keep-alive

keep-alive可以實(shí)現(xiàn)組件緩存，當(dāng)組件切換時(shí)不會(huì)對(duì)當(dāng)前組件進(jìn)行卸載。

keep-alive標(biāo)簽主要是有include、exclude、max三個(gè)屬性

• include、exclude 前兩個(gè)屬性允許keep-alive有條件的進(jìn)行緩存

• max可以定義組件最大的緩存?zhèn)€數(shù)，如果超過(guò)了這個(gè)個(gè)數(shù)的話，在下一個(gè)新實(shí)例創(chuàng)建之前，就會(huì)將以緩存組件中最久沒(méi)有被訪問(wèn)到的實(shí)例銷毀掉。

兩個(gè)生命周期activated/deactivated，用來(lái)得知當(dāng)前組件是否處于活躍狀態(tài)。

keep-alive的原理 緩存管理+特殊的掛載/卸載流程

特殊的卸載/掛載流程:activated/deactivated
緩存管理:LRU(Least Recently Used)最近最少使用是一種淘汰算法

特殊的卸載/掛載流程
由于不能將組件真正的卸載，所以keep-alive是將組件從原容器移動(dòng)到另外一個(gè)假容器中，實(shí)現(xiàn)假卸載。掛載的時(shí)候從隱藏容器中再搬運(yùn)到原容器。對(duì)應(yīng)到組件的activated和deactivated生命周期
keepAlive會(huì)對(duì)內(nèi)部組件(需要被緩存的)進(jìn)行打標(biāo)記

• 在內(nèi)部組件的vnode對(duì)象上添加shouldKeepAlive屬性，告訴渲染器卸載組件時(shí)，該組件需要緩存，不要真正卸載

• 在內(nèi)部組件的vnode對(duì)象上添加keptAlive屬性，如果組件已經(jīng)被緩存，添加標(biāo)記，表示渲染器并不會(huì)重新掛載，直接激活即可。

緩存策略:最近最少使用

使用Map對(duì)象cache來(lái)實(shí)現(xiàn)對(duì)組件的緩存，key是vnode.type值，value為vnode對(duì)象，因?yàn)榻M件的vnode對(duì)象中存在對(duì)組件實(shí)例的引用(vnode.component)

• cache 前者用來(lái)存緩存組件的虛擬dom集合

• keys 后者用來(lái)存緩存組件的key集合

• 根據(jù)組件ID和tag生成緩存Key，并在緩存對(duì)象中查找是否已緩存過(guò)該組件實(shí)例。如果存在，直接取出緩存值并更新該key在keys中的位置（更新key的位置是實(shí)現(xiàn)LRU置換策略的關(guān)鍵）。

• 如果不存在，則在map對(duì)象中存儲(chǔ)該組件實(shí)例并保存key值，之后檢查緩存的實(shí)例數(shù)量是否超過(guò)max設(shè)置值，超過(guò)則根據(jù)LRU置換策略刪除最近最久未使用的實(shí)例（即是下標(biāo)為0的那個(gè)key）。

到此，關(guān)于“vue-router相關(guān)面試題及答案有哪些”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！