🥳理解 hash 与 history 路由,实现前端路由

参考一文了解 history 和 react-router 的实现原理react-router 版本

前端路由

如何实现前端路由

实现前端路由,需要解决两个核心问题

  1. 如何改变 URL 却不引起页面刷新?
  2. 如何监测 URL 变化?

hash 模式

  1. hash模式下,改变url中的hash部分不会引起页面的刷新
  2. 通过 hashchange 事件监听 URL 的改变。
  3. 改变 URL 的方式 : 浏览器导航栏的前进后退、通过<a>标签、通过window.location
基于 hash 实现
js 复制代码
  <ul>
        <!-- 定义路由 -->
        <li><a href="#/home">home</a></li>
        <li><a href="#/about">about</a></li>
        <!-- 渲染路由对应的 UI -->
        <div id="routeView"></div>
    </ul>
    <script>
        // 页面加载完不会触发 hashchange,这里主动触发一次 hashchange 事件
        window.addEventListener('DOMContentLoaded', onHashChange)
        // 监听路由变化
        window.addEventListener('hashchange', onHashChange)
        // 路由视图
        let routerView = document.querySelector('#routeView')
        // 路由变化时,根据路由渲染对应 UI
        function onHashChange() {
            switch (location.hash) {
                case '#/home':
                    routerView.innerHTML = 'Home'
                    return
                case '#/about':
                    routerView.innerHTML = 'About'
                    return
                default:
                    routerView.innerHTML = 'Not Found'; return;
            }
        }
    </script>

history 模式

  1. history 提供了 pushStatereplaceState 两个方法,这两个方法改变 URL 的 path 部分不会引起页面刷新
  2. 通过 popstate 事件监听 URL 的改变。
  3. 只有浏览器导航栏的前进后退改变 URL 时会触发popstate事件

History.pushState()History.replaceState()

  • object:是一个对象,通过 pushState 方法可以将该对象内容传递到新页面中。在
  • title:不用
  • url:新的网址,必须与当前页面处在同一个域。
js 复制代码
history.pushState({ foo: 'bar' }, '', '2.html'); 
console.log(history.state) // {foo: "bar"}

popstate 每当 history 对象出现变化时,就会触发 popstate 事件。

js 复制代码
window.addEventListener('popstate', function(e) {
    //e.state 相当于 history.state
    console.log('state: ' + JSON.stringify(e.state));
    console.log(history.state);
});

基于 history 实现

因为 history 模式下,<a>标签和pushState/replaceState不会触发popstate方法,我们需要对<a>的跳转和pushState/replaceState做特殊处理。

  • <a>作点击事件,禁用默认行为,调用pushState方法并手动触发popstate的监听事件
  • pushState/replaceState可以重写 history 的方法并通过派发事件能够监听对应事件

重写pushState

js 复制代码
      var _wr = function (type) {
        var orig = history[type];
        return function () {
          var e = new Event(type);
          e.arguments = arguments;
          var rv = orig.apply(this, arguments);
          window.dispatchEvent(e);
          return rv;
        };
      };
      history.pushState = _wr("pushState");
      //每次调用`history.pushState`时,都会触发一个名为`pushState`的自定义事件。
      window.addEventListener("pushState", function (e) {
        onPopState();
      });

重写a

js 复制代码
   var linkList = document.querySelectorAll("a[href]");
      linkList.forEach((el) =>
        el.addEventListener("click", function (e) {
          e.preventDefault();
          history.pushState(null, "", el.getAttribute("href"));
        })
      );
    }
js 复制代码
<!DOCTYPE html>
<html>
 <head>
   <title>Parcel Sandbox</title>
   <meta charset="UTF-8" />
   <script>
     var _wr = function (type) {
       var orig = history[type];
       return function () {
         var e = new Event(type);
         e.arguments = arguments;
         var rv = orig.apply(this, arguments);
         window.dispatchEvent(e);
         return rv;
       };
     };
     history.pushState = _wr("pushState");
   </script>
 </head>

 <body>
   <ul>
     <!-- 定义路由 -->
     <li><a href="/home">home</a></li>
     <li><a href="/about">about</a></li>

     <!-- 渲染路由对应的 UI -->
     <div id="routeView"></div>
   </ul>

   <script>
     var routeView = null;

     function onLoad() {
       routerView = document.querySelector("#routeView");
       onPopState();

       // 拦截 <a> 标签点击事件默认行为
       // 点击时使用 pushState 修改 URL并更新手动 UI,从而实现点击链接更新 URL 和 UI 的效果。
       var linkList = document.querySelectorAll("a[href]");
       linkList.forEach((el) =>
         el.addEventListener("click", function (e) {
           e.preventDefault();
           history.pushState(null, "", el.getAttribute("href"));
         })
       );
     }
     // Use it like this:
     window.addEventListener("pushState", function (e) {
       onPopState();
     });
     // 页面加载完不会触发 hashchange,这里主动触发一次 hashchange 事件,处理默认hash
     window.addEventListener("DOMContentLoaded", onLoad);
     // 监听路由变化
     window.addEventListener("popstate", onPopState);
     // 路由变化时,根据路由渲染对应 UI
     function onPopState() {
       switch (location.pathname) {
         case "/home":
           routerView.innerHTML = "This is Home";
           return;
         case "/about":
           routerView.innerHTML = "This is About";
           return;
         case "/list":
           routerView.innerHTML = "This is List";
           return;
         default:
           routerView.innerHTML = "Not Found";
           return;
       }
     }
   </script>
 </body>
</html>
相关推荐
若梦plus12 分钟前
Nuxt.js基础与进阶
前端·vue.js
樱花开了几轉18 分钟前
React中为甚么强调props的不可变性
前端·javascript·react.js
风清云淡_A18 分钟前
【REACT18.x】CRA+TS+ANTD5.X实现useImperativeHandle让父组件修改子组件的数据
前端·react.js
小飞大王66619 分钟前
React与Rudex的合奏
前端·react.js·前端框架
若梦plus1 小时前
React之react-dom中的dom-server与dom-client
前端·react.js
若梦plus1 小时前
react-router-dom中的几种路由详解
前端·react.js
若梦plus1 小时前
Vue服务端渲染
前端·vue.js
Mr...Gan1 小时前
VUE3(四)、组件通信
前端·javascript·vue.js
OEC小胖胖1 小时前
渲染篇(二):解密Diff算法:如何用“最少的操作”更新UI
前端·算法·ui·状态模式·web
万少1 小时前
AI编程神器!Trae+Claude4.0 简单配置 让HarmonyOS开发效率飙升 - 坚果派
前端·aigc·harmonyos