vue中前端路由的原理分析

今天小編給大家分享一下vue中前端路由的原理分析的相關(guān)知識點，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

成都網(wǎng)站制作、網(wǎng)站設(shè)計,成都做網(wǎng)站公司-成都創(chuàng)新互聯(lián)公司已向1000多家企業(yè)提供了,網(wǎng)站設(shè)計,網(wǎng)站制作,網(wǎng)絡(luò)營銷等服務(wù)!設(shè)計與技術(shù)結(jié)合,多年網(wǎng)站推廣經(jīng)驗,合理的價格為您打造企業(yè)品質(zhì)網(wǎng)站。

一. 前端路由

現(xiàn)代前端開發(fā)中最流行的頁面模型，莫過于SPA單頁應(yīng)用架構(gòu)。單頁面應(yīng)用指的是應(yīng)用只有一個主頁面，通過動態(tài)替換DOM內(nèi)容并同步修改url地址，來模擬多頁應(yīng)用的效果，切換頁面的功能直接由前臺腳本來完成，而不是由后端渲染完畢后前端只負(fù)責(zé)顯示。前端三駕馬車Angular,Vue,React均基于此模型來運(yùn)行的。SPA能夠以模擬多頁面應(yīng)用的效果，歸功于其前端路由機(jī)制。

二. 兩種實現(xiàn)方式

1、hash模式

這里的hash是指url尾巴后的#號及后面的字符。這里的#和css里的#是一個意思。hash也稱作錨點，本身是用來做頁面定位的，她可以使對應(yīng)id的元素顯示在可是區(qū)域內(nèi)。由于hash值變化不會導(dǎo)致瀏覽器向服務(wù)器發(fā)出請求，而且hash改變會觸發(fā)hashchange事件，瀏覽器的進(jìn)后退也能對其進(jìn)行控制，所以人們在 html5 的 history 出現(xiàn)前，基本都是使用 hash 來實現(xiàn)前端路由的。

改變#不觸發(fā)網(wǎng)頁加載

http://www.xxxx.com/index.html#location1 
// 改成
http://www.xxxx.com/index.html#location

瀏覽器不會重新向服務(wù)器請求index.html

window.location.hash = 'qq' // 設(shè)置 url 的 hash，會在當(dāng)前url后加上 '#qq'
var hash = window.location.hash // '#qq' 
window.addEventListener('hashchange', function(){ 
 // 監(jiān)聽hash變化，點擊瀏覽器的前進(jìn)后退會觸發(fā)
})

下面我來簡單實現(xiàn)一個前端路由的封裝，大家能很清楚的明白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() {
 // 路由儲存
 this.routes = {};
 // 當(dāng)前路由
 this.currentUrl = '';
 }
 Router.prototype = {
 // 路由處理
 route: function (path, callback) {
 this.routes[path] = callback || function(){};
 },
 // 頁面刷新
 refresh: function () {
 // 當(dāng)前的hash值
 this.currentUrl = location.hash.slice(1) || '/';
 // 執(zhí)行hash值改變后相對應(yīng)的回調(diào)函數(shù)
 this.routes[this.currentUrl]();
 },
 // 頁面初始化
 init: function () {
 // 頁面加載事件
 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)前是首頁");
 })
 Router.route('/item', () => {
 changeConent('當(dāng)前是item頁面');
 })
 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來進(jìn)行路由控制。通過這兩個方法可以改變url且不向服務(wù)器發(fā)送請求。同時不會像hash有一個#,更加的美觀。

下面先看api

window.history.pushState(state, title, url) 
// state：需要保存的數(shù)據(jù)，這個數(shù)據(jù)在觸發(fā)popstate事件時，可以在event.state里獲取
// title：標(biāo)題，基本沒用，一般傳 null
// url：設(shè)定新的歷史記錄的 url。新的 url 與當(dāng)前 url 的 origin 必須是一樣的，否則會拋出錯誤。url可以是絕對路徑，也可以是相對路徑。
//如 當(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)聽瀏覽器前進(jìn)后退事件，pushState 與 replaceState 方法不會觸發(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)前歷史堆棧中頁面的數(shù)量

已經(jīng)有 hash 模式了，而且 hash 能兼容到IE8， history 只能兼容到 IE10，為什么還要搞個 history 呢？

首先，hash 本來是拿來做頁面定位的，如果拿來做路由的話，原來的錨點功能就不能用了。其次，hash 的傳參是基于 url 的，如果要傳遞復(fù)雜的數(shù)據(jù)，會有體積的限制，而 history 模式不僅可以在url里放參數(shù)，還可以將數(shù)據(jù)存放在一個特定的對象中。

hash 和 history API對比

以上就是“vue中前端路由的原理分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當(dāng)前文章：vue中前端路由的原理分析
標(biāo)題路徑：http://muchs.cn/article4/jpepoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計公司、App開發(fā)、標(biāo)簽優(yōu)化、電子商務(wù)

廣告

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