Javascript中怎么實現前端路由

這篇文章給大家介紹Javascript中怎么實現前端路由，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

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

說一下前端路由實現的簡要原理，以 hash 形式（也可以使用 History API 來處理）為例，當 url 的 hash 發生變化時，觸發 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); } }

上面代碼中路由系統Router對象實現，主要提供三個方法：

init 監聽瀏覽器 url hash 更新事件。

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

refresh 執行當前url對應的回調函數，更新頁面。

Router調用方式如下：點擊觸發 url 的 hash 改變，并對應地更新內容，運行后你會發現每次點擊菜單時，#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中怎么實現前端路由就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。