devbox
Monodyee
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【浅入浅出】前端单页面路由实现原理

作者：Monodyee | 2024-03-18 10:52:25

赞

踩

【浅入浅出】前端单页面路由实现原理

上一节了解了单页面，那么你知道前端单页面路由是怎么实现的吗？

说真的，我也不知道

在这里插入图片描述
接下来一起学习一下。

为什么 SPA 需要路由系统

因为缺少路由系统的 SPA 框架有其存在的弊端：

  1. 用户在使用过程中，url 不会发生变化，那么用户在进行多次跳转之后，如果一不小心刷新了页面，又会回到最开始的状态，用户体验极差。
  2. 由于缺乏路由，不利于 SEO，搜索引擎进行收录。

主流的前端路由系统是通过 hash 或 history 来实现的，下面先看看 Hash 模式

Hash 路由

hash 就是指 url 后的 # 号以及后面的字符。例如：https://blog.csdn.net/#kaimo313，那么 #kaimo313 就是 hash 值。

我们知道 url 上的 hash 本意是用来作锚点的，方便用户在一个很长的文档里进行上下的导航。

为什么 hash 能实现路由？

这是因为 hash 有一点很特殊：改变 url 的 hash 时，不会刷新页面，但是会触发相应的 hashchange 回调函数，使得 hash 能用来做路由控制。

实现改变 hash 刷新页面局部

下面我们实现一个功能：通过改变 hash，去改变 body 的背景色

效果如下：

实现的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hash</title>
</head>
<body>
  <ul>
    <li><a href="#/">turn white</a></li>
    <li><a href="#/blue">turn blue</a></li>
    <li><a href="#/green">turn green</a></li>
  </ul>
  <script>
    // 改变 body 颜色
    function changeBodyColor(color) {
      document.body.style.backgroundColor = color;
    }
    function Router() {
      this.routes = {};  // routes 用来存放不同路由对应的回调函数
      this.currentUrl = "";
    }
    // 每个不同的hash值，对应不同的函数调用处理。
    Router.prototype.route = function(path, callback) {
      this.routes[path] = callback || function() {};
    }
    Router.prototype.refresh = function() {
      console.log('触发一次 hashchange，hash 值为:', location.hash);
      this.currentUrl = location.hash.slice(1) || '/';
      this.routes[this.currentUrl]();
    }
    // init 用来初始化路由，在 load 事件发生后刷新页面，并且绑定 hashchange 事件，当 hash 值改变时触发对应回调函数
    Router.prototype.init = function() {
      // 页面在第一次加载时并不会触发hashchang事件，只有改变了hash值后才会触发。
      window.addEventListener("load", this.refresh.bind(this), false);
      window.addEventListener("hashchange", this.refresh.bind(this), false);
    }

    let hashRouter = new Router();
    hashRouter.init();

    hashRouter.route("/", function() {
      changeBodyColor("white");
    })
    hashRouter.route("/blue", function() {
      changeBodyColor("blue");
    })
    hashRouter.route("/green", function() {
      changeBodyColor("green");
    })
  </script>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54

或者使用类似发布订阅模式的方式，使用 ES6 的 class 实现：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ul>
    <li><a href="#/">turn white</a></li>
    <li><a href="#/blue">turn blue</a></li>
    <li><a href="#/green">turn green</a></li>
  </ul>
  <script>
    class Router {
      constructor() {
        this.routes = {}; 
        this.currentUrl = "";
      }
      // 改变 body 颜色
      changeBodyColor(color) {
        document.body.style.backgroundColor = color;
      }
      route(path, callback) {
        this.routes[path] = callback || function() {};
      }
      refresh() {
        console.log('触发一次 hashchange，hash 值为:', location.hash);
        this.currentUrl = location.hash.slice(1) || '/';
        this.routes[this.currentUrl]();
      }
      // init 里面需要添加 load hashchange 事件，触发刷新方法
      init() {
        window.addEventListener("load", this.refresh.bind(this), false);
        window.addEventListener("hashchange", this.refresh.bind(this), false);
      }
    }

    let hashRouter = new Router();
    hashRouter.init();

    hashRouter.route("/", function() {
      hashRouter.changeBodyColor("white");
    })
    hashRouter.route("/blue", function() {
      hashRouter.changeBodyColor("blue");
    })
    hashRouter.route("/green", function() {
      hashRouter.changeBodyColor("green");
    })
  </script>  
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54

在这里插入图片描述

我们可以发现 hash 模式的情况下 url 上会有一个 # 号，很不美观，有没有什么解决方案？答案就是使用 history 模式。

那么什么是 history 模式？

History 路由

我们可能使用过 history 的部分 api 比如：

history.go(-1);       // 后退一页
history.go(2);        // 前进两页
history.forward();     // 前进一页
history.back();      // 后退一页

  • 1
  • 2
  • 3
  • 4

在 HTML5 规范中，history 新增了以下几个 API

history.pushState();         // 添加新的状态到历史状态栈
history.replaceState();     // 用新的状态代替当前状态
history.state             // 返回当前状态对象

  • 1
  • 2
  • 3

下面具体了解一下 pushState，state，replaceState，popstate 事件。

pushState

History.pushState() 方法用于在历史中添加一条记录。

window.history.pushState(state, title, url)

  • 1
  • state：一个与添加的记录相关联的状态对象，主要用于popstate事件。该事件触发时，该对象会传入回调函数。也就是说，浏览器会将这个对象序列化以后保留在本地，重新载入这个页面的时候，可以拿到这个对象。如果不需要这个对象，此处可以填null。
  • title：新页面的标题。但是，现在所有浏览器都忽视这个参数，所以这里可以填空字符串。
  • url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

举个例子：

假定当前网址是 history.html，使用 pushState() 方法在浏览记录（History 对象）中添加一个新记录。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>history1 页面</title>
</head>
<body>
  <script>
    var stateObj = { foo: 'bar' };
    history.pushState(stateObj, 'page 2', 'history2.html');
  </script>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

我们发现添加新记录后，浏览器地址栏立刻显示 history2.html，但并不会跳转到 history2.html，甚至也不会检查 history2.html 是否存在，它只是成为浏览历史中的最新记录。

在这里插入图片描述

然后我们在 url 栏里输入 https://blog.csdn.net/kaimo313 我的博客地址，回车之后进入到我的博客之后，在点击返回上一次浏览的页面
在这里插入图片描述

我们会发现，此时的页面已经变成了 history2.html。

在这里插入图片描述

总之，pushState() 方法不会触发页面刷新，只是导致 History 对象发生变化，地址栏会有反应。

注意：

如果 pushState 想要插入一个跨域的网址，导致报错。这样设计的目的是，防止恶意代码让用户以为他们是在另一个网站上，因为这个方法不会导致页面跳转。

state

使用 pushState 方法之后，就可以用 History.state 属性读出状态对象。

var stateObj = { foo: 'bar' };
history.pushState(stateObj, 'page 2', 'history2.html');
console.log('history.state：', history.state);

  • 1
  • 2
  • 3

在这里插入图片描述

replaceState

History.replaceState() 方法用来修改 History 对象的当前记录，其他都与 pushState() 方法一模一样。

我们来举个例子：假定当前网页是 kaimo.html。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>kaimo</title>
</head>
<body>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

在这里插入图片描述

第1步执行： URL 显示为 http://127.0.0.1:5500/kaimo.html?page=1

history.pushState({page: 1}, 'kaimo 1', '?page=1')

  • 1

在这里插入图片描述

第2步执行： URL 显示为 http://127.0.0.1:5500/kaimo.html?page=2

history.pushState({page: 2}, 'kaimo 2', '?page=2')

  • 1

在这里插入图片描述

第3步执行： URL 显示为 http://127.0.0.1:5500/kaimo.html?page=3

history.replaceState({page: 3}, 'kaimo 3', '?page=3')

  • 1

在这里插入图片描述

第4步执行： URL 显示为 http://127.0.0.1:5500/kaimo.html?page=1，回退之后变成page=1了。

history.back()

  • 1

在这里插入图片描述

第5步执行： URL 显示为 http://127.0.0.1:5500/kaimo.html，再次回退之后变成初始页了。

history.back()

  • 1

在这里插入图片描述

第6步执行： URL 显示为 http://127.0.0.1:5500/kaimo.html?page=3。

history.go(2) // 前进两页

  • 1

在这里插入图片描述

popstate 事件

每当同一个文档的浏览历史（即history对象）出现变化时，就会触发popstate事件。

注意，仅仅调用 pushState() 方法或 replaceState() 方法 ，并不会触发该事件，只有用户点击浏览器倒退按钮和前进按钮，或者使用 JavaScript 调用 History.back()、History.forward()、History.go() 方法时才会触发。另外，该事件只针对同一个文档，如果浏览历史的切换，导致加载不同的文档，该事件也不会触发。

使用的时候，可以为popstate事件指定回调函数。

window.onpopstate = function (event) {
  console.log('location: ' + document.location);
  console.log('state: ' + JSON.stringify(event.state));
};

// 或者
window.addEventListener('popstate', function(event) {
  console.log('location: ' + document.location);
  console.log('state: ' + JSON.stringify(event.state));
});

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

举个例子：比如从 kaimo.html 跳转到 kaimo.html?page=1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>kaimo</title>
</head>
<body>
  <script>
    window.addEventListener('popstate', function(event) {
      console.log('location: ' + document.location);
      console.log('state: ' + JSON.stringify(event.state));
      console.log('state2: ' + JSON.stringify(history.state));
    });
  </script>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

在这里插入图片描述

回调函数的参数是一个 event 事件对象，它的 state 属性指向 pushState 和 replaceState 方法为当前 URL 所提供的状态对象（即这两个方法的第一个参数）。这个 state 对象也可以直接通过 history.state 对象读取。

注意，页面第一次加载的时候，浏览器不会触发popstate事件。

思路分析

通过上面的分析我们知道 history.pushState 或者 history.replaceState 也能做到改变 url 的同时，不会刷新页面。

hash 的改变会触发 onhashchange 事件，但是我们无法监听到 history 的改变事件。

那有没有什么方法实现？

答案是有的，如果我们能罗列出所有可能改变 history 的途径，然后在这些途径 一 一 进行拦截，也一样相当于监听了 history 的改变。

url 的改变只能由以下 3 种途径引起：

  1. 点击浏览器的前进或者后退按钮；
  2. 点击 a 标签；
  3. 在 JS 代码中直接修改路由

对于第 1 种，HTML5 规范中新增了一个 onpopstate 事件，通过它便可以监听到前进或者后退按钮的点击。

对于第 2 和 第 3 种，可以看成是一种，因为 a 标签的默认事件可以被禁止，进而调用 JS 方法。

思路图：
在这里插入图片描述

代码实现

下面是我写的简易版本，实现了三种途径修改 url 渲染页面的效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>history 路由</title>
</head>
<body>
  <ul>
    <li><a href="/kaimo1">kaimo 1</a></li>
    <li><a href="/kaimo2">kaimo 2</a></li>
    <li><a href="/kaimo3">kaimo 3</a></li>
  </ul>
  <hr>
  <button onclick="kaimoBtnClick('/kaimo1')">kaimo 1</button>
  <button onclick="kaimoBtnClick('/kaimo2')">kaimo 2</button>
  <button onclick="kaimoBtnClick('/kaimo3')">kaimo 3</button>
  <hr>
  <div id="route-view"></div>
  <script>
    class HistoryRouter {
      constructor() {
        this.routeView = document.getElementById('route-view');
      }
      init() {
        // 处理途径1
        window.addEventListener("DOMContentLoaded",() => {
          // 获取所有带 href 属性的 a 标签节点
          var aList = document.querySelectorAll('a[href]')
          // 遍历 a 标签节点数组，阻止默认事件，添加点击事件回调函数
          aList.forEach(aNode => aNode.addEventListener('click', e => {
            e.preventDefault() // 阻止a标签的默认事件
            var href = aNode.getAttribute('href')
            // 通过 history.pushState 手动修改地址栏
            window.history.pushState(null, '', href)
            console.log('处理途径1');
            this.forceUpdate();
          }));
        });
        // 处理途径3
        window.addEventListener('popstate', () => {
        console.log('处理途径3');
          this.forceUpdate();
        });
      }
      // 强制渲染
      forceUpdate() {
        console.log('强制渲染', location.pathname);
        switch(location.pathname) {
          case '/kaimo2':
            this.routeView.innerHTML = '这里是 kaimo2 对应的页面'
            return
          case '/kaimo3':
            this.routeView.innerHTML = '这里是 kaimo3 对应的页面'
            return
          default:
            this.routeView.innerHTML = '这里是 kaimo1 对应的页面'
            return
        }
      }
      historyPush(path) {
        window.history.pushState({}, null, path);
        this.forceUpdate();
      }
    }

    let historyRouter = new HistoryRouter();
    historyRouter.init();

    // 处理途径2
    function kaimoBtnClick(path) {
      // 通过 history.pushState 手动修改地址栏
      window.history.pushState(null, '', path);
      console.log('处理途径2');
      historyRouter.forceUpdate();
    }
  </script>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80

在这里插入图片描述

注意

这里需要注意的是：不能在浏览器直接打开静态文件，需要通过 web 服务，启动端口去浏览网址。默认打开的协议是 file 协议，它是不会被 popstate 监听的。

在这里插入图片描述

拓展

参考资料

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/262505
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号