羊村懒王

这个屌丝很懒，什么也没留下！

热门标签

Vue的路由实现原理：hash模式和 history模式_vue hash和history的原理

作者：羊村懒王 | 2024-05-02 13:16:34

踩

vue hash和history的原理

Vue的路由实现：hash模式和 history模式

你越是认真生活，你的生活就会越美好——弗兰克·劳埃德·莱特
《人生果实》经典语录

前端路由有两种模式：hash 模式和 history 模式，接下来分析这两种模式的实现方式和优缺点。

Vue官方文档-HTML5 History模式

为了方便演示，需全局安装 light-server：

yarn global add light-server
// 或者
npm -g install light-server
1
2
3

hash与history的区别
	hash	history
url显示	有#，很Low	无#，好看
回车刷新	可以加载到hash值对应页面	一般就是404掉了
支持版本	支持低版本浏览器和IE浏览器	HTML5新推出的API

hash 模式(Vue-router默认)

hash 模式是一种把前端路由的路径用井号 #拼接在真实 URL 后面的模式。
当井号 #后面的路径发生变化时，浏览器并不会重新发起请求，而是会触发 hashchange 事件。

示例：

我们新建一个 hash.html文件，内容为：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hash</title>
</head>
<body>
  <a href="#/a">A页面</a>
  <a href="#/b">B页面</a>
  <div id="app"></div>

  <script>
    function render() {
      const app = document.querySelector('#app')
      app.innerHTML = window.location.hash
    }
    window.addEventListener('hashchange', render)
  </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

在目录下运行：

light-server -s .  --port 3000
1

然后打开 http://localhost:3000/hash.html查看效果。

在上面的例子中，我们利用 a 标签设置了两个路由导航，把 app 当做视图渲染容器，当切换路由时触发视图容器更新，这其实就是大多数前端框架哈希路由的实现原理。

hash模式优缺点

优点

只需要前端配置路由表, 不需要后端的参与
兼容性好, 浏览器都能支持
hash值改变不会向后端发送请求, 完全属于前端路由

缺点

hash值前面需要加#, 不符合url规范,也不美观

history 模式

history API 是 H5 提供的新特性，允许开发者直接更改前端路由，即更新浏览器 URL 地址而不重新发起请求(将url替换并且不刷新页面)。

示例：

我们新建一个 history.html，内容为：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>history</title>
</head>
<body>
  <a href="javascript:toA();">A页面</a>
  <a href="javascript:toB();">B页面</a>
  <div id="app"></div>
  <script>
    function render() {
      console.log('render')
      app.innerHTML = window.location.pathname
    }
    function toA() {
      history.pushState({}, null, '/a')
      render()
    }
    function toB() {
      history.pushState({}, null, '/b')
      render()
    }
    window.addEventListener('popstate', render)
  </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

在目录下运行：

light-server -s . --historyindex '/history.html' --port 3000
1

然后打开 http://localhost:3000/history.html查看效果。

history API 提供了丰富的函数供开发者调用，我们不妨把控制台打开，然后输入下面的语句来观察浏览器地址栏的变化：

history.replaceState({}, null, '/b') // 替换路由
history.pushState({}, null, '/a') // 路由压栈 替换当前地址 被替换地址进入访问历史
history.back() // 返回
history.forward() // 前进
history.go(-2) // 后退2次
1
2
3
4
5

上面的代码监听了 popstate 事件，该事件能监听到：

用户点击浏览器的前进和后退操作
手动调用 history 的 back、forward和 go方法

监听不到

history 的 pushState和 replaceState方法

这也是为什么上面的 toA 和 toB 函数内部需要手动调用 render 方法的原因。
另外，大家可能也注意到 light-server 的命令多了 --historyindex '/history.html'参数，这是干什么的呢？

浏览器在刷新的时候，会按照路径发送真实的资源请求，如果这个路径是前端通过 history API 设置的 URL，那么在服务端往往不存在这个资源，于是就返回 404了。
上面的参数的意思就是如果后端资源不存在就返回 history.html 的内容。(试了没反应，知道有这种用法即可)

因此在线上部署基于 history API的单页面应用的时候，一定要后端配合支持才行，否则会出现大量的 404。
以最常用的 Nginx 为例，只需要在配置的 location / 中增加下面一行即可：

try_files $uri /index.html
1

history 模式的优缺点：

优点：

符合url地址规范, 不需要#, 使用起来比较美观

缺点：

兼容性不如 hash，且需要服务端支持重定向，否则一刷新页面就404了
兼容性比较差, 利用了 HTML5 History对象中新增的 pushState() 和 replaceState() 方法,需要特定浏览器的支持.

传统路由跟前端路由不同

传统的路由指的是：当用户访问一个url时，对应的服务器会接收这个请求，然后解析url中的路径，从而执行对应的处理逻辑。这样就完成了一次路由分发。

而前端路由不涉及服务器，是前端利用hash或者HTML5的history API来实现的，一般用于不同内容的展示和切换。

Vue源码学习目录

点击回到 Vue源码学习完整目录

谢谢你阅读到了最后~
期待你关注、收藏、评论、点赞~
让我们一起变得更强

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/524240

Vue的路由实现原理：hash模式 和 history模式_vue hash和history的原理

Vue的路由实现：hash模式 和 history模式