🥳理解 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>
相关推荐
超人不会飛15 分钟前
就着HTTP聊聊SSE的前世今生
前端·javascript·http
蓝胖子的多啦A梦18 分钟前
Vue+element 日期时间组件选择器精确到分钟,禁止选秒的配置
前端·javascript·vue.js·elementui·时间选选择器·样式修改
夏天想21 分钟前
vue2+elementui使用compressorjs压缩上传的图片
前端·javascript·elementui
今晚打老虎z29 分钟前
dotnet-env: .NET 开发者的环境变量加载工具
前端·chrome·.net
用户38022585982434 分钟前
vue3源码解析:diff算法之patchChildren函数分析
前端·vue.js
烛阴40 分钟前
XPath 进阶:掌握高级选择器与路径表达式
前端·javascript
小鱼小鱼干43 分钟前
【JS/Vue3】关于Vue引用透传
前端
JavaDog程序狗1 小时前
【前端】HTML+JS 实现超燃小球分裂全过程
前端
独立开阀者_FwtCoder1 小时前
URL地址末尾加不加 "/" 有什么区别
前端·javascript·github
独立开阀者_FwtCoder1 小时前
Vue3 新特性:原来watch 也能“暂停”和“恢复”了!
前端·javascript·github