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

编程轨迹_

已于 2022-06-26 09:55:12 修改

阅读量444

点赞数 1

分类专栏：综合文章标签：前端路由

于 2019-06-20 21:09:03 首次发布

本文链接：https://blog.csdn.net/ImagineCode/article/details/93134684

版权

综合专栏收录该内容

58 篇文章 6 订阅

订阅专栏

⭐️ 本文首发自前端修罗场(点击即可加入)，一个专注 Web 技术、答疑解惑、面试辅导、职业发展的社区。现在加入，即可参与打卡挑战，挑战成功即可获取一次免费的模拟面试机会，进而评估知识点的掌握程度，获得更全面的学习指导意见！

路由的概念来源于服务端，在服务端中路由描述的是 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标签点击事件并拦截。

❤️ 现在关注【前端修罗场】，后台回复【666】，即可获取一份【免费的优质学习资料】,一起学习，一起进步~

编程轨迹_

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
【前端路由】实现一个 hash、history 路由，改善页面渲染体验

前端路由路由的概念来源于服务端，在服务端中路由描述的是 URL 与处理函数之间的映射关系。在 Web 前端单页应用 SPA(Single Page Application)中，路由描述的是 URL 与 UI 之间的映射关系，这种映射是单向的，即 URL 变化引起 UI 更新（无需刷新页面）。实现前端路由核心：不引起页面刷新检测URL变化方法：hash：URL中（#）及（#）后......
复制链接

扫一扫