您好,登錄后才能下訂單哦!
這篇文章主要講解了“vue前端路由機(jī)制怎么實(shí)現(xiàn)”,文中的講解內(nèi)容簡(jiǎn)單清晰,易于學(xué)習(xí)與理解,下面請(qǐng)大家跟著小編的思路慢慢深入,一起來(lái)研究和學(xué)習(xí)“vue前端路由機(jī)制怎么實(shí)現(xiàn)”吧!
現(xiàn)代前端開(kāi)發(fā)中最流行的頁(yè)面模型,莫過(guò)于SPA單頁(yè)應(yīng)用架構(gòu)。單頁(yè)面應(yīng)用指的是應(yīng)用只有一個(gè)主頁(yè)面,通過(guò)動(dòng)態(tài)替換DOM內(nèi)容并同步修改url地址,來(lái)模擬多頁(yè)應(yīng)用的效果,切換頁(yè)面的功能直接由前臺(tái)腳本來(lái)完成,而不是由后端渲染完畢后前端只負(fù)責(zé)顯示。前端三駕馬車(chē)Angular,Vue,React均基于此模型來(lái)運(yùn)行的。SPA能夠以模擬多頁(yè)面應(yīng)用的效果,歸功于其前端路由機(jī)制。
1、hash模式
這里的hash是指url尾巴后的#號(hào)及后面的字符。這里的#和css里的#是一個(gè)意思。hash也稱作錨點(diǎn),本身是用來(lái)做頁(yè)面定位的,她可以使對(duì)應(yīng)id的元素顯示在可是區(qū)域內(nèi)。由于hash值變化不會(huì)導(dǎo)致瀏覽器向服務(wù)器發(fā)出請(qǐng)求,而且hash改變會(huì)觸發(fā)hashchange事件,瀏覽器的進(jìn)后退也能對(duì)其進(jìn)行控制,所以人們?cè)?html5 的 history 出現(xiàn)前,基本都是使用 hash 來(lái)實(shí)現(xiàn)前端路由的。
改變#不觸發(fā)網(wǎng)頁(yè)加載
http://www.xxxx.com/index.html#location1 // 改成 http://www.xxxx.com/index.html#location
瀏覽器不會(huì)重新向服務(wù)器請(qǐng)求index.html
window.location.hash = 'qq' // 設(shè)置 url 的 hash,會(huì)在當(dāng)前url后加上 '#qq' var hash = window.location.hash // '#qq' window.addEventListener('hashchange', function(){ // 監(jiān)聽(tīng)hash變化,點(diǎn)擊瀏覽器的前進(jìn)后退會(huì)觸發(fā) })
下面我來(lái)簡(jiǎn)單實(shí)現(xiàn)一個(gè)前端路由的封裝,大家能很清楚的明白vue路由的原理。
<ul> <li><a href="#/">index</a></li> <li><a href="#/item">item</a></li> <li><a href="#/list">list</a></li> </ul> <br> <br> <div>頭部</div> <h2 class='result'></h2> function Router() { // 路由儲(chǔ)存 this.routes = {}; // 當(dāng)前路由 this.currentUrl = ''; } Router.prototype = { // 路由處理 route: function (path, callback) { this.routes[path] = callback || function(){}; }, // 頁(yè)面刷新 refresh: function () { // 當(dāng)前的hash值 this.currentUrl = location.hash.slice(1) || '/'; // 執(zhí)行hash值改變后相對(duì)應(yīng)的回調(diào)函數(shù) this.routes[this.currentUrl](); }, // 頁(yè)面初始化 init: function () { // 頁(yè)面加載事件 window.addEventListener('load', this.refresh.bind(this), false); // hash 值改變事件 window.addEventListener('hashchange', this.refresh.bind(this), false); } } // 全局掛載 window.Router = new Router(); // 初始化 window.Router.init(); let obj = document.querySelector('.result'); function changeConent (cnt) { obj.innerHTML = cnt } // 匹配路由做相應(yīng)的操作 Router.route('/', () => { changeConent("當(dāng)前是首頁(yè)"); }) Router.route('/item', () => { changeConent('當(dāng)前是item頁(yè)面'); }) Router.route('/list', () => { // ajax 的數(shù)據(jù)就可以這樣去拼接 setTimeout(() => { obj.innerHTML = '<h2 style="color: red">Hello World</h2>' }, 1000) })
2、history模式
HTML5規(guī)范提供了history.pushState和history.replaceState來(lái)進(jìn)行路由控制。通過(guò)這兩個(gè)方法可以改變url且不向服務(wù)器發(fā)送請(qǐng)求。同時(shí)不會(huì)像hash有一個(gè)#,更加的美觀。
下面先看api
window.history.pushState(state, title, url) // state:需要保存的數(shù)據(jù),這個(gè)數(shù)據(jù)在觸發(fā)popstate事件時(shí),可以在event.state里獲取 // title:標(biāo)題,基本沒(méi)用,一般傳 null // url:設(shè)定新的歷史記錄的 url。新的 url 與當(dāng)前 url 的 origin 必須是一樣的,否則會(huì)拋出錯(cuò)誤。url可以是絕對(duì)路徑,也可以是相對(duì)路徑。 //如 當(dāng)前url是 https://www.baidu.com/a/,執(zhí)行history.pushState(null, null, './qq/'),則變成 https://www.baidu.com/a/qq/, //執(zhí)行history.pushState(null, null, '/qq/'),則變成 https://www.baidu.com/qq/ window.history.replaceState(state, title, url) // 與 pushState 基本相同,但它是修改當(dāng)前歷史記錄,而 pushState 是創(chuàng)建新的歷史記錄 window.addEventListener("popstate", function() { // 監(jiān)聽(tīng)瀏覽器前進(jìn)后退事件,pushState 與 replaceState 方法不會(huì)觸發(fā) }); window.history.back() // 后退,觸發(fā)popstate事件 window.history.forward() // 前進(jìn),觸發(fā)popstate事件 window.history.go(1) // 前進(jìn)一步,-2為后退兩步,window.history.length可以查看當(dāng)前歷史堆棧中頁(yè)面的數(shù)量
已經(jīng)有 hash 模式了,而且 hash 能兼容到IE8, history 只能兼容到 IE10,為什么還要搞個(gè) history 呢?
首先,hash 本來(lái)是拿來(lái)做頁(yè)面定位的,如果拿來(lái)做路由的話,原來(lái)的錨點(diǎn)功能就不能用了。其次,hash 的傳參是基于 url 的,如果要傳遞復(fù)雜的數(shù)據(jù),會(huì)有體積的限制,而 history 模式不僅可以在url里放參數(shù),還可以將數(shù)據(jù)存放在一個(gè)特定的對(duì)象中。
Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架,Vue與其它大型框架的區(qū)別是,使用Vue可以自底向上逐層應(yīng)用,其核心庫(kù)只關(guān)注視圖層,方便與第三方庫(kù)和項(xiàng)目整合,且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫(kù)開(kāi)發(fā)復(fù)雜的單頁(yè)應(yīng)用。
感謝各位的閱讀,以上就是“vue前端路由機(jī)制怎么實(shí)現(xiàn)”的內(nèi)容了,經(jīng)過(guò)本文的學(xué)習(xí)后,相信大家對(duì)vue前端路由機(jī)制怎么實(shí)現(xiàn)這一問(wèn)題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云,小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。