【前端路由】实现一个 hash、history 路由，改善页面渲染体验

前端修罗场

发布于 2023-10-07 18:50:52

23400

代码可运行

文章被收录于专栏：Web 技术Web 技术

运行总次数：0

代码可运行

路由的概念来源于服务端，在服务端中路由描述的是 URL 与处理函数之间的映射关系。

在 Web 前端单页应用 SPA(Single Page Application)中，路由描述的是 URL 与 UI 之间的映射关系，这种映射是单向的，即 URL 变化引起 UI 更新（无需刷新页面）。

实现前端路由

核心：

不引起页面刷新
检测URL变化

方法：

hash：URL中（#）及（#）后面的部分。通过hashchange事件监听URL变化，改变URL的方式：
1. 通过浏览器前进后退改变URL
2. 通过<a>标签改变URL
3. 通过window.locatioin改变URL
history：提供pushState和replaceState两个方法：
1. 提供popstate事件，但popstate事件有些不同：
  - 通过浏览器前进后退改变URL时会触发popstate事件
  - 通过pushState/replaceState或<a>标签改变URL时不会触发popstate事件
2. 可以通过拦截pushState/replaceState的调用和<a>标签的点击事件来检测URL是否发生变化

实现方式(1)：hash

<body>
  <!-- route -->
  <ul>
    <li>
      <a href="#/home">home</a>
    </li>
    <li>
      <a href="#/about">about</a>
    </li>
  </ul>
  <!-- view -->
  <div id="routerView"></div>
  <script>
    window.addEventListener('DOMContentLoaded',onLoad)
    //监听路由变化
    window.addEventListener('hashchange',onHashChange)
    let routerView = null;
    function onLoad() {
      routerView = document.querySelector('#routerView');
      onHashChange();
    }
    function onHashChange() {
      switch(location.hash) {
        case '#/home':
          routerView.innerHTML = 'HOME';
          return;
        case '#/about':
          routerView.innerHTML = 'About';
          return;
        default:
          routerView.innerHTML = '';
          return;
      }
    }
  </script>
</body>

实现方式2：history

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <ul>
    <li>
      <a href="/home">home</a>
    </li>
    <li>
      <a href="/about">about</a>
    </li>
    <div id="routeView"></div>
  </ul>
  <script>
    window.addEventListener('DOMContentLoaded',onLoad)
    //监听路由变化
    window.addEventListener('popstate',onPopState)

    //routeView
    let routeView = null;

    function onLoad () {
      routeView = document.querySelector('#routeView');
      onPopState()
      //拦截a标签点击事件，点击时使用pushState修改URL并手动更新routeView
      let linkList = document.querySelectorAll('a[href]')
      linkList.forEach(el => el.addEventListener('click',function(e){
        e.preventDefault()
        history.pushState(null,'',el.getAttribute('href'))
          onPopState()
      }))
    }

    function onPopState() {
      switch (location.pathname) {
        case '/home':
          routeView.innerHTML = 'HOME'
          return
        case '/about':
          routeView.innerHTML = 'About'
          return
        default:
          routeView.innerHTML = ''
          return
      }
    }
  </script>
</body>
</html>

我们看到，使用history的方式，需要多判断a标签点击事件并拦截。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

渲染