JS如何實現(xiàn)前端路由功能的示例分析

這篇文章主要講解了JS如何實現(xiàn)前端路由功能的示例分析，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。

成都創(chuàng)新互聯(lián)公司，專注為中小企業(yè)提供官網(wǎng)建設、營銷型網(wǎng)站制作、響應式網(wǎng)站建設、展示型成都網(wǎng)站設計、成都做網(wǎng)站等服務，幫助中小企業(yè)通過網(wǎng)站體現(xiàn)價值、有效益。幫助企業(yè)快速建站、解決網(wǎng)站建設與網(wǎng)站營銷推廣問題。

路由就是根據(jù)不同的 url 地址展示不同的內容或頁面，早期路由的概念是在后端出現(xiàn)的，通過服務器端渲染后返回頁面，隨著頁面越來越復雜，服務器端壓力越來越大。后來ajax異步刷新的出現(xiàn)使得前端也可以對url進行管理，此時，前端路由就出現(xiàn)了。

單頁面就是有前端路由來實現(xiàn)的，也就是說網(wǎng)站只有一個頁面，點擊導航會顯示不同的內容，對應的url也在發(fā)生改變。在這個過程中，js會實時檢測url的變化，從而改變顯示的內容。

路由實現(xiàn)的原理：window綁定了監(jiān)聽函數(shù)，當url的hash值發(fā)生變化的時候會觸發(fā)hashchange回調，在回調中進行不同的操作，馬上刷新頁面，從而顯示不同的頁面。

下面是一個前端路由的簡單實現(xiàn)：通過路由實現(xiàn)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

//構造函數(shù)
function Router() {
  this.routes = {};
  this.currentUrl = '';
}
Router.prototype.route = function(path, callback) {
  this.routes[path] = callback || function(){};//給不同的hash設置不同的回調函數(shù)
};
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]();//根據(jù)當前的hash值來調用相對應的回調函數(shù)
  }
 
};
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>路由就是根據(jù)不同的 url 地址展示不同的內容或頁面，早期路由的概念是在后端出現(xiàn)的，通過服務器端渲染后返回頁面，隨著頁面越來越復雜，服務器端壓力越來越大。后來ajax異步刷新的出現(xiàn)使得前端也可以對url進行管理，此時，前端路由就出現(xiàn)了。</p>");
});
Router.route('/two', function () {
  $(".content").html("<h4>單頁面就是有前端路由來實現(xiàn)的，也就是說網(wǎng)站只有一個頁面，點擊導航會顯示不同的內容，對應的url也在發(fā)生改變。在這個過程中，js會實時檢測url的變化，從而改變顯示的內容。</h4>");
});
Router.route('/three', function () {
  $(".content").html("<img src='/upload/otherpic64/12890819-f8665293cc8d0dcf.png&#63;imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp' width='500'/>");
});

注意：router.js要在test.js之前進行調用，不然會先加載test.js從而找不到，出現(xiàn)router.js未被定義。

上面router對象實現(xiàn)主要提供了三個方法

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

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

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

看完上述內容，是不是對JS如何實現(xiàn)前端路由功能的示例分析有進一步的了解，如果還想學習更多內容，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站標題：JS如何實現(xiàn)前端路由功能的示例分析
分享地址：http://sd-ha.com/article8/jgshop.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設計、域名注冊、軟件開發(fā)、網(wǎng)站設計公司、外貿建站、網(wǎng)站內鏈

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

猜你還喜歡下面的內容

久久久精品一区ed2k-女人被男人叉到高潮的视频-中文字幕乱码一区久久麻豆樱花-俄罗斯熟妇真实视频

JS如何實現(xiàn)前端路由功能的示例分析