您好,登錄后才能下訂單哦!
這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)使用vue-router怎么實現(xiàn)前端路由,文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
前端路由
Hash 路由
url 的 hash
是以 #
開頭,原本是用來作為錨點,從而定位到頁面的特定區(qū)域。當(dāng) hash
改變時,頁面不會因此刷新,瀏覽器也不會向服務(wù)器發(fā)送請求。
http://www.xxx.com/#/home
同時, hash
改變時,并會觸發(fā)相應(yīng)的 hashchange
事件。所以,hash 很適合被用來做前端路由。當(dāng) hash 路由發(fā)生了跳轉(zhuǎn),便會觸發(fā) hashchange 回調(diào),回調(diào)里可以實現(xiàn)頁面更新的操作,從而達(dá)到跳轉(zhuǎn)頁面的效果。
window.addEventListener('hashchange', function () { console.log('render'); });
History 路由
HTML5 規(guī)范中提供了 history.pushState
和 history.replaceState
來進(jìn)行路由控制。通過這兩個方法,可以實現(xiàn)改變 url 且不向服務(wù)器發(fā)送請求。同時不會像 hash
有一個 #
,更加的美觀。但是 History 路由需要服務(wù)器的支持,并且需將所有的路由重定向到根頁面。
History 路由的改變不會去觸發(fā)某個事件,所以我們需要去考慮如何觸發(fā)路由更新后的回調(diào)。
有以下兩種方式會改變 url:
調(diào)用 history.pushState 或 history.replaceState;
點擊瀏覽器的前進(jìn)與后退。
第一個方式可以封裝一個方法,在調(diào)用 pushState(replaceState)后再調(diào)用回調(diào)。
function push (url) { window.history.pushState({}, null, url); handleHref(); } function handleHref () { console.log('render'); }
第二個方式,瀏覽器的前進(jìn)與后退會觸發(fā) popstate
事件。
window.addEventListener('popstate', handleHref);
路由實現(xiàn)
我們通過 <a>
標(biāo)簽來進(jìn)行切換路由,通過一個 <div>
標(biāo)簽來裝載各路由對應(yīng)的頁面內(nèi)容。
參考 vue-router 的調(diào)用,我們會這么地調(diào)用一個 Router
,將路由與對應(yīng)組件作為參數(shù)傳入:
const router = new Router([ { path: '/', component: 'home' }, { path: '/book', component: 'book' }, { path: '/movie', component: 'movie' } ]);
數(shù)組里是各路由對應(yīng)的要顯示的內(nèi)容,接下來就來開始實現(xiàn)這個 Router
。
Hash 路由實現(xiàn)
Hash 路由 <a>
標(biāo)簽都需要帶上 #
:
<div> <a href="#/" rel="external nofollow" >home</a> <a href="#/book" rel="external nofollow" >book</a> <a href="#/movie" rel="external nofollow" >movie</a> <div id="content"></div> </div>
Router
的代碼實現(xiàn)如下:
class Router { constructor (options) { this.routes = {}; this.init(); // 遍歷,綁定視圖更新 options.forEach(item => { this.route(item.path, () => { document.getElementById('content').innerHTML = item.component; }); }); } // 綁定監(jiān)聽事件 init () { window.addEventListener('load', this.updateView.bind(this), false); window.addEventListener('hashchange', this.updateView.bind(this), false); } // 更新試圖 updateView () { const currentUrl = window.location.hash.slice(1) || '/'; this.routes[currentUrl] && this.routes[currentUrl](); } // 將路由與回調(diào)函數(shù)關(guān)聯(lián) route (path, cb) { this.routes[path] = cb; } }
實現(xiàn)效果如下:
History 路由實現(xiàn)
History 路由需要服務(wù)器的支持,可以點擊這里 的代碼參考。
<div> <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-href="/" rel="external nofollow" >home</a> <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-href="/book" rel="external nofollow" >book</a> <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-href="/movie" rel="external nofollow" >movie</a> <div id="content"></div> </div>
Router
的代碼實現(xiàn)如下:
class Router { constructor (options) { this.routes = {}; this.init(); this.bindEvent(); // 遍歷,綁定視圖更新 options.forEach(item => { this.route(item.path, () => { document.getElementById('content').innerHTML = item.component; }); }); } // 綁定點擊事件 bindEvent () { const _this = this; const links = document.getElementsByTagName('a'); [].forEach.call(links, link => { link.addEventListener('click', function () { const url = this.getAttribute('data-href'); _this.push(url); }); }); } // 綁定監(jiān)聽事件 init () { window.addEventListener('load', this.updateView.bind(this), false); window.addEventListener('popstate', this.updateView.bind(this), false); } push (url) { window.history.pushState({}, null, url); this.updateView(); } // 更新試圖 updateView () { const currentUrl = window.location.pathname || '/'; this.routes[currentUrl] && this.routes[currentUrl](); } // 將路由與回調(diào)函數(shù)關(guān)聯(lián) route (path, cb) { this.routes[path] = cb; } }
上述就是小編為大家分享的使用vue-router怎么實現(xiàn)前端路由了,如果剛好有類似的疑惑,不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。