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

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

公司主營業(yè)務(wù)：網(wǎng)站建設(shè)、做網(wǎng)站、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出吳起免費(fèi)做網(wǎng)站回饋大家。

vue-router的原理

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

前端路由

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

主要就是

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

• 如何檢測到URL變化了

路由的hash模式

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

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

改變URL的三種方式

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

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

• 通過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() 方法，用來在瀏覽歷史中添加和修改記錄，改變頁面路徑，使URL跳轉(zhuǎn)不會(huì)重新加載頁面。

• 類似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ī)范, 不需要#, 使用起來比較美觀

缺點(diǎn)

• 在用戶手動(dòng)輸入地址或刷新頁面時(shí)會(huì)發(fā)起url請(qǐng)求, 后端需要配置index.html頁面用戶匹配不到靜態(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ū)別?

-	描述	如何指定跳轉(zhuǎn)的路由	如果沒有傳參	可以傳參沒有要求的值嗎
params參數(shù)	路徑/params參數(shù)	必須要使用name指定路由	params是路由的一部分,如果在配置了占位符必須要有 如果這個(gè)路由有params傳參，但是在跳轉(zhuǎn)的時(shí)候沒有傳這個(gè)參數(shù)，會(huì)導(dǎo)致跳轉(zhuǎn)失敗或者頁面會(huì)沒有內(nèi)容。	傳遞路徑上沒有的占位符，地址欄上不會(huì)顯示并且刷新會(huì)丟失
query參數(shù)	路徑? key1=val1 & key2=val2....	1.可以使用name指定路由 2.可以使用path指定路由	query是拼接在url后面的參數(shù)，沒有也沒關(guān)系	query不會(huì)

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

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

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

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

vue-router 提供的導(dǎo)航守衛(wèi)主要用來通過跳轉(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í)還沒有進(jìn)入組件，組件實(shí)例還沒有被創(chuàng)建。所以不能獲取組件實(shí)例，此時(shí) this 為 undefined，在 beforeCreate 生命周期前觸發(fā)。

• beforeRouteUpdate() this 已經(jīng)可用了，所以給 next 傳遞回調(diào)就沒有必要了。對(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)就沒有必要了。

• 獨(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è)過程不可以使用this，因?yàn)榻M件實(shí)例還沒有被創(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ù)，如果超過了這個(gè)個(gè)數(shù)的話，在下一個(gè)新實(shí)例創(chuàng)建之前，就會(huì)將以緩存組件中最久沒有被訪問到的實(shí)例銷毀掉。

兩個(gè)生命周期activated/deactivated，用來得知當(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來實(shí)現(xiàn)對(duì)組件的緩存，key是vnode.type值，value為vnode對(duì)象，因?yàn)榻M件的vnode對(duì)象中存在對(duì)組件實(shí)例的引用(vnode.component)

• cache 前者用來存緩存組件的虛擬dom集合

• keys 后者用來存緩存組件的key集合

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

• 如果不存在，則在map對(duì)象中存儲(chǔ)該組件實(shí)例并保存key值，之后檢查緩存的實(shí)例數(shù)量是否超過max設(shè)置值，超過則根據(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)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！

當(dāng)前標(biāo)題：vue-router相關(guān)面試題及答案有哪些
鏈接URL：http://bm7419.com/article34/jdjdse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、網(wǎng)站設(shè)計(jì)公司、建站公司、品牌網(wǎng)站設(shè)計(jì)、動(dòng)態(tài)網(wǎng)站、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)