這篇文章主要講解了“Javascript中如何實現(xiàn)前端路由”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“Javascript中如何實現(xiàn)前端路由”吧！

創(chuàng)新互聯(lián)專注于垣曲企業(yè)網站建設,成都響應式網站建設,成都做商城網站。垣曲網站建設公司,為垣曲等地區(qū)提供建站服務。全流程定制開發(fā)，專業(yè)設計，全程項目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務

HTML

頁面中有一個導航菜單ul，和一個p#result用來顯示結果，當點擊導航菜單時，#result中會顯示不同的結果內容。

<ul> <li><a href="#/">首頁</a></li> <li><a href="#/product">產品</a></li> <li><a href="#/server">服務</a></li> </ul> <p id="result"></p>

JAVASCRIPT

說一下前端路由實現(xiàn)的簡要原理，以 hash 形式（也可以使用 History API 來處理）為例，當 url 的 hash 發(fā)生變化時，觸發(fā) hashchange 注冊的回調，回調中去進行不同的操作，進行不同的內容的展示。

function Router(){ this.routes = {}; this.curUrl = ''; this.route = function(path, callback){ this.routes[path] = callback || function(){}; }; this.refresh = function(){ this.curUrl = location.hash.slice(1) || '/'; this.routes[this.curUrl](); }; this.init = function(){ window.addEventListener('load', this.refresh.bind(this), false); window.addEventListener('hashchange', this.refresh.bind(this), false); } }

上面代碼中路由系統(tǒng)Router對象實現(xiàn)，主要提供三個方法：

init 監(jiān)聽瀏覽器 url hash 更新事件。

route 存儲路由更新時的回調到回調數(shù)組routes中，回調函數(shù)將負責對頁面的更新。

refresh 執(zhí)行當前url對應的回調函數(shù)，更新頁面。

Router調用方式如下：點擊觸發(fā) url 的 hash 改變，并對應地更新內容，運行后你會發(fā)現(xiàn)每次點擊菜單時，#result中會變換背景色和內容。

var R = new Router(); R.init(); var res = document.getElementById('result'); R.route('/', function() { res.style.background = 'blue'; res.innerHTML = '這是首頁'; }); R.route('/product', function() {    res.style.background = 'orange'; res.innerHTML = '這是產品頁'; }); R.route('/server', function() {    res.style.background = 'black'; res.innerHTML = '這是服務頁'; });

感謝各位的閱讀，以上就是“Javascript中如何實現(xiàn)前端路由”的內容了，經過本文的學習后，相信大家對Javascript中如何實現(xiàn)前端路由這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關知識點的文章，歡迎關注！

新聞名稱：Javascript中如何實現(xiàn)前端路由
網頁地址：http://aaarwkj.com/article10/godddo.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、網站策劃、移動網站建設、App開發(fā)、網站制作、做網站

廣告

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