摘要:我們知道是的核心插件,而當前項目一般都是單頁面應用,也就是說是應用在單頁面應用中的。原理是傳統(tǒng)的頁面應用,是用一些超鏈接來實現頁面切換和跳轉的其實剛才單頁面應用跳轉原理即實現原理實現原理原理核心就是更新視圖但不重新請求頁面。
近期面試,遇到關于vue-router實現原理的問題,在查閱了相關資料后,根據自己理解,來記錄下。
我們知道vue-router是vue的核心插件,而當前vue項目一般都是單頁面應用,也就是說vue-router是應用在單頁面應用中的。
那么,什么是單頁面應用呢?在單頁面應用出現之前,多頁面應用又是什么樣子呢?
即 第一次進入頁面的時候會請求一個html文件,刷新清除一下。切換到其他組件,此時路徑也相應變化,但是并沒有新的html文件請求,頁面內容也變化了。
原理是:JS會感知到url的變化,通過這一點,可以用js動態(tài)的將當前頁面的內容清除掉,然后將下一個頁面的內容掛載到當前頁面上,這個時候的路由不是后端來做了,而是前端來做,判斷頁面到底是顯示哪個組件,清除不需要的,顯示需要的組件。這種過程就是單頁應用,每次跳轉的時候不需要再請求html文件了。
多頁面即 每一次頁面跳轉的時候,后臺服務器都會給返回一個新的html文檔,這種類型的網站也就是多頁網站,也叫做多頁應用。
原理是:傳統(tǒng)的頁面應用,是用一些超鏈接來實現頁面切換和跳轉的
其實剛才單頁面應用跳轉原理即 vue-router實現原理
vue-router實現原理原理核心就是 更新視圖但不重新請求頁面。
vue-router實現單頁面路由跳轉,提供了三種方式:hash模式、history模式、abstract模式,根據mode參數來決定采用哪一種方式。
路由模式vue-router 提供了三種運行模式:
● hash: 使用 URL hash 值來作路由。默認模式。
● history: 依賴 HTML5 History API 和服務器配置。查看 HTML5 History 模式。
● abstract: 支持所有 JavaScript 運行環(huán)境,如 Node.js 服務器端
hash即瀏覽器url中#后面的內容,包含#。hash是URL中的錨點,代表的是網頁中的一個位置,單單改變#后的部分,瀏覽器只會加載相應位置的內容,不會重新加載頁面。
也就是說
即#是用來指導瀏覽器動作的,對服務器端完全無用,HTTP請求中,不包含#。
每一次改變#后的部分,都會在瀏覽器的訪問歷史中增加一個記錄,使用”后退”按鈕,就可以回到上一個位置。
所以說Hash模式通過錨點值的改變,根據不同的值,渲染指定DOM位置的不同數據。
History模式HTML5 History API提供了一種功能,能讓開發(fā)人員在不刷新整個頁面的情況下修改站點的URL,就是利用 history.pushState API 來完成 URL 跳轉而無須重新加載頁面;
由于hash模式會在url中自帶#,如果不想要很丑的 hash,我們可以用路由的 history 模式,只需要在配置路由規(guī)則時,加入"mode: "history"",這種模式充分利用 history.pushState API 來完成 URL 跳轉而無須重新加載頁面。
有時,history模式下也會出問題:
eg:
hash模式下:xxx.com/#/id=5 請求地址為 xxx.com,沒有問題。
history模式下:xxx.com/id=5 請求地址為 xxx.com/id=5,如果后端沒有對應的路由處理,就會返回404錯誤;
為了應對這種情況,需要后臺配置支持:
在服務端增加一個覆蓋所有情況的候選資源:如果 URL 匹配不到任何靜態(tài)資源,則應該返回同一個 index.html 頁面,這個頁面就是你 app 依賴的頁面。
abstract模式是使用一個不依賴于瀏覽器的瀏覽歷史虛擬管理后端。
根據平臺差異可以看出,在 Weex 環(huán)境中只支持使用 abstract 模式。 不過,vue-router 自身會對環(huán)境做校驗,如果發(fā)現沒有瀏覽器的 API,vue-router 會自動強制進入 abstract 模式,所以 在使用 vue-router 時只要不寫 mode 配置即可,默認會在瀏覽器環(huán)境中使用 hash 模式,在移動端原生環(huán)境中使用 abstract 模式。 (當然,你也可以明確指定在所有情況下都使用 abstract 模式)。
具體更加詳細的文章,請參考:
Vue番外篇 -- vue-router淺析原理
vue-router的原理
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規(guī)行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/102733.html
摘要:后端路由簡介路由這個概念最先是后端出現的。前端路由模式隨著的流行,異步數據請求交互運行在不刷新瀏覽器的情況下進行。通過這些就能用另一種方式來實現前端路由了,但原理都是跟實現相同的。 后端路由簡介 路由這個概念最先是后端出現的。在以前用模板引擎開發(fā)頁面時,經常會看到這樣 http://www.xxx.com/login 大致流程可以看成這樣: 瀏覽器發(fā)出請求 服務器監(jiān)聽到80端口(或4...
摘要:五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新,歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香,消溽暑。鳥雀呼晴,侵曉窺檐語。葉上初陽乾宿雨,水面清圓,一一風荷舉。家住吳門,久作長安旅。五月漁郎相憶否。小楫輕舟,夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly;請::點擊::集web前端最近很火的vue2框架資源;定時更新,歡迎 Star 一下。 蘇...
摘要:五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新,歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香,消溽暑。鳥雀呼晴,侵曉窺檐語。葉上初陽乾宿雨,水面清圓,一一風荷舉。家住吳門,久作長安旅。五月漁郎相憶否。小楫輕舟,夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly;請::點擊::集web前端最近很火的vue2框架資源;定時更新,歡迎 Star 一下。 蘇...
摘要:路由模塊的本質就是建立起和頁面之間的映射關系。這時候我們可以直接利用傳值了使用來匹配路由,然后通過來傳遞參數跳轉對應路由配置于是我們可以獲取參數六配置子路由二級路由實際生活中的應用界面,通常由多層嵌套的組件組合而成。 一、前言 要學習vue-router就要先知道這里的路由是什么?為什么我們不能像原來一樣直接用標簽編寫鏈接哪?vue-router如何使用?常見路由操作有哪些?等等這些問...
閱讀 1133·2021-11-24 10:21
閱讀 2574·2021-11-19 11:35
閱讀 1673·2019-08-30 15:55
閱讀 1302·2019-08-30 15:54
閱讀 1203·2019-08-30 15:53
閱讀 3514·2019-08-29 17:21
閱讀 3314·2019-08-29 16:12
閱讀 3424·2019-08-29 15:23
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要