路由中history模式和hash模式的区别（附带大厂面试题）

冰镇白干

已于 2023-06-24 10:22:50 修改

阅读量110

点赞数 1

分类专栏：面试题文章标签： vue

于 2023-06-19 19:44:03 首次发布

本文链接：https://blog.csdn.net/bt_giegie/article/details/131293756

版权

面试题专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章介绍了Vue-Router的两种主要路由模式：Hash模式利用onhashchange事件监听URL变化，不重新请求页面；History模式借助history.pushStateAPI改变URL而不刷新页面。这两种模式都是为了在单页面应用中实现路由切换，而URL变化不导致页面刷新。

摘要由CSDN通过智能技术生成

前言

当浏览器url地址变化，浏览器都会根据url来请求相对应的html文件，当访问一个不存在的html文件就会报404错误。那么像vue这种单页面就是通过vue-router实现的路由切换
下面介绍一下vue-router的两种模式以及原理

hash模式

http://127.0.0.1:5500/hash-router.html#/about #后面的内容变化后，浏览器是不会再次请求的。然后通过监听onhashchange事件即可。
下面是简单的例子

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    .main {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    .index {
      display: none;
      background-color: bisque;
    }

    .about {
      display: none;
      background-color: brown;
    }
  </style>
</head>

<body>
  <div class="main">
    <div class="nav">
      <a href="#/index">首页</a>
      |
      <a href="#/about">关于</a>
    </div>
    <div class="content">
      <div class="index">
        <h1>首页</h1>
      </div>
      <div class="about">
        <h1>关于</h1>
      </div>
    </div>
  </div>

  <script>
    window.onhashchange = (e) => {
      const newURL = e.newURL.split('#/')[1]
      const oldURL = e.oldURL.split('#/')[1]
      document.querySelector(`.${oldURL}`).style.display = 'none'
      document.querySelector(`.${newURL}`).style.display = 'block'
    }
  </script>

</body>

</html>

history模式

http://127.0.0.1:5500/history-router.html，history模式的url就正常多了，那么url改变后，单页面应用是如何做到不重新请求呢？就是通过history.pushState()api实现的。

history.pushState() api 具体使用

例子：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    .main {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    .index {
      display: none;
      background-color: bisque;
    }

    .about {
      display: none;
      background-color: brown;
    }
  </style>
</head>

<body>
  <div class="main">
    <div class="nav">
      <a href="javascript:jump('index')">首页</a>
      |
      <a href="javascript:jump('about')">关于</a>
    </div>
    <div class="content">
      <div class="index">
        <h1>首页</h1>
      </div>
      <div class="about">
        <h1>关于</h1>
      </div>
    </div>
  </div>

  <script>
    function jump(url) {
      history.pushState(null, null, `/${url}`)
      let pages = document.querySelectorAll('.content > div')
      pages.forEach((page) => {
        page.style.display = 'none'
      })
      document.querySelector(`.${url}`).style.display = 'block'
    }
  </script>

</body>

</html>