溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了JS如何實現前端路由功能的示例分析，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
路由就是根據不同的 url 地址展示不同的內容或頁面，早期路由的概念是在后端出現的，通過服務器端渲染后返回頁面，隨著頁面越來越復雜，服務器端壓力越來越大。后來ajax異步刷新的出現使得前端也可以對url進行管理，此時，前端路由就出現了。
單頁面就是有前端路由來實現的，也就是說網站只有一個頁面，點擊導航會顯示不同的內容，對應的url也在發生改變。在這個過程中，js會實時檢測url的變化，從而改變顯示的內容。
路由實現的原理：window綁定了監聽函數，當url的hash值發生變化的時候會觸發hashchange回調，在回調中進行不同的操作，馬上刷新頁面，從而顯示不同的頁面。
下面是一個前端路由的簡單實現：通過路由實現url的切換、頁面內容的改變。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>前端路由測試</title>
<script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
<style>
*{
margin:0;
padding: 0;
}
.content{
width: 500px;
height: 300px;
margin-top: 30px;
margin:20px auto 0;
}
#click_btn{
width: 500px;
height: 50px;
margin:100px auto 0;
}
#click_btn a{
display: block;
background: #333;
color: #fff;
text-decoration: none;
line-height: 50px;
text-align: center;
float: left;
margin-right: 15px;
padding: 0px 15px;
}
#click_btn a:hover{
background: #666;
}
</style>
</head>
<body>
<div id="click_btn">
<a href="#/one" rel="external nofollow" >第一個頁面</a>
<a href="#/two" rel="external nofollow" >第二個頁面</a>
<a href="#/three" rel="external nofollow" >第三個頁面</a>
</div>
<div class="content"></div>
<script src="router.js"></script>
<script src="test.js"></script>
</body>
</html>router.js
//構造函數
function Router() {
this.routes = {};
this.currentUrl = '';
}
Router.prototype.route = function(path, callback) {
this.routes[path] = callback || function(){};//給不同的hash設置不同的回調函數
};
Router.prototype.refresh = function() {
console.log(location.hash.slice(1));//獲取到相應的hash值
this.currentUrl = location.hash.slice(1) || '/';//如果存在hash值則獲取到，否則設置hash值為/
// console.log(this.currentUrl);
if(this.currentUrl&&this.currentUrl!='/'){
this.routes[this.currentUrl]();//根據當前的hash值來調用相對應的回調函數
}
};
Router.prototype.init = function() {
window.addEventListener('load', this.refresh.bind(this), false);
window.addEventListener('hashchange', this.refresh.bind(this), false);
}
//給window對象掛載屬性
window.Router = new Router();
window.Router.init();test.js
Router.route('/one', function () {
$(".content").html("<p>路由就是根據不同的 url 地址展示不同的內容或頁面，早期路由的概念是在后端出現的，通過服務器端渲染后返回頁面，隨著頁面越來越復雜，服務器端壓力越來越大。后來ajax異步刷新的出現使得前端也可以對url進行管理，此時，前端路由就出現了。</p>");
});
Router.route('/two', function () {
$(".content").html("<h4>單頁面就是有前端路由來實現的，也就是說網站只有一個頁面，點擊導航會顯示不同的內容，對應的url也在發生改變。在這個過程中，js會實時檢測url的變化，從而改變顯示的內容。</h4>");
});
Router.route('/three', function () {
$(".content").html("<img src='https://upload-images.jianshu.io/upload_images/12890819-f8665293cc8d0dcf.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp' width='500'/>");
});注意：router.js要在test.js之前進行調用，不然會先加載test.js從而找不到，出現router.js未被定義。
上面router對象實現主要提供了三個方法
1.init監聽瀏覽器url的hash值更新事件。
2.route存儲路由更新時的回調到回調數組routes中，回掉函數將負責對頁面進行更新。
3.refresh執行當前url的回調函數，更新頁面。
看完上述內容，是不是對JS如何實現前端路由功能的示例分析有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
