【前端Tip】Vue-Router中hash和history路由的区别

1. SPA

SPA（Single-page Web applications）：单页面应用。指的是只有一个Web页面的应用，是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序。
通俗点讲就是在一个项目中，只有一个html页面，它在第一次加载页面时，将唯一完成的html页面和所有其余页面组件一起下载下来，所有的组件的展示与切换都在这唯一的页面中完成，当切换页面时，不会重新加载整个页面，而是通过路由来实现不同组件之间的切换，更新某个指定的容器中的内容。

SPA的优点：

更新视图而不会重新请求页面
最有桌面应用的即时性、网站的可移植性和可访问性
用户体验好、快，内容的改变不需要重新加载整个页面
良好的钱后端分离，分工更明确

SPA的缺点：

不利于搜索引擎的抓取
首次渲染速度相对较慢

2. Vue-Router

Vue-Router是Vue.js官方的路由插件。Vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在单页面应用中，页面跳转和切换就是组件的切换。路由模块的本质就是建立起url和页面之间的映射关系。

路由器对象底层实现的三大步骤：

监视地址栏变化；
查找当前路径对应的页面组件；
将找到的页面组件替换到router-view的位置；

Vue-Router在实现单页面路由时，提供了两种方式：Hash模式和History模式，可以在创建router时选择不同的模式：

const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(), // 这里指定具体的模式
  routes, // `routes: routes` 的缩写
})

2.1 Hash模式

Vue-Router的Hash模式，使用URL的hash来模拟一个完整的URL，当URL改变时，页面不会重新加载；# 就是hash富豪，在hash符号后的值称为hash值；

首先我们需要了解下window.onhashchange：https://www.runoob.com/jsref/event-onhashchange.html。当改变hash值的时候，可以通过window.onhashchange监听到这个变化：

<body>
    <button onclick="changeHash()">改变hash值</button>
    <script>
        function changeHash() {
            window.location.hash = "account"
        }

        window.onhashchange = function () {
            console.log(`监听到hash值修改：${window.location.href}`);
        }
    </script>
</body>

// 输出的值为：http://127.0.0.1:5500/javascript/254.history.html#account

Hash模式其实就是利用了window可以监听onhashchange事件来实现的。hash值是用来指导浏览器动作，对服务器没有影响，HTTP请求中不会包括hash值，同时每一次改变hash值，都会在浏览器的访问历史中增加一个记录，使用“后退”按钮，就可以回到上一个位置。所以，Hash模式是根据hash值来发生改变，根据不同的值，渲染指定DOM位置的不同数据。

Hash模式的特点：

url中会带有一个#号
可以改变URL，但是不会触发页面的重新加载（hash的改变会记录在 window.hisotry 中）因此并不算是一次 HTTP 请求，所以这种模式不利于 SEO 优化
只能修改#后面的部分，因此只能跳转与当前URL同文档的URL
只能通过字符串改变URL
通过window.onhashchange监听hash的改变，借此实现无刷新跳转的功能
每改变一次hash（window.location.hash），都会在浏览器的访问历史中增加一个记录
路径从#开始，后面的所有路径都叫做路由的哈希值，并且哈希值它不会作为路径的一部分随着http请求，发给服务器

2.2 History模式

History模式是Vue-Router的另一种模式。它是通过调用window.history对象上的一系列方法来实现页面的无刷新跳转。
利用了HTML5 History Interface中新增的pushState()和replaceState()方法，这两个方法应用于浏览器的历史记录栈，在当前已有的back、forward、go的基础上，他们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的URL，但是浏览器不会向后端发送请求。

2.2.1 history.pushState

2.2.1.1 简介

history.pushState是HTML5提供的一个新特性，它允许我们改变浏览器地址栏的url，并且不会像传统的URL跳转那样重新加载整个页面。

2.2.1.2 使用方法

history.pushState的使用方法非常简单。需要三个参数：state、title、url：

state是一个js对象，可以存储一些与URL相关的数据
title是一个字符串，通常被浏览器用于显示页面标题
url是一个包含当前url的字符串

下面是一个代码示例：

history.pushState({page: "settings"}, "Settings", "/settings");

上面的代码将当前URL改成了/settings，同时还传入了一个名为page的数据对象，这个对象会被存储到浏览器的会话历史中，以便后续使用。需要注意的是，调用pushState并不会导致浏览器加载新的页面或刷新现有页面。

2.2.1.3 注意事项

pushState调用不会触发页面加载事件及其它事件的处理函数
在调用history.pushState时，浏览器地址栏的URL会更新，但是浏览器并不会像传统的URL跳转那样重新加载整个页面。如果需要在页面的URL改变时执行一些特殊的操作，例如加载新的内容，需要绑定一个popstate事件处理函数：

window.addEventListener('popstate', function(e) {
  console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
});

pushState调用无法阻止用户使用后退按钮
当用户点击浏览器的后退按钮时，浏览器会返回上一个历史记录条目，这会导致页面的URL发生改变。尽管调用pushState方法改变了URL，但无法阻止用户使用后退按钮。如果你希望阻止用户使用后退按钮，需要在popstate事件中执行特殊的操作。
pushState调用可能导致404错误
如果直接使用history.pushState更新URL，但是并没有相应的服务器端处理，那么在用户刷新页面或者直接访问该URL时会导致404错误。因此，需要在服务端进行相应的配置，让服务端能够正确处理这些URL请求，返回相应的内容。

使用history.pushState可以实现改变URL而不会发生页面刷新，这也是History模式实现的基础。

2.2.2 History模式的特点

路由跳转不需要重新加载页面
不带#，看起来比hash路由好看很多
兼容性没有hash好，可以看上面pushState的注意事项

2.2.3 问题及解决

2.2.3.1 生产环境

当我们把history项目部署到服务器后，此时我们在浏览器中输入一个网址（www.test.com），此时会经过DNS解析，拿到ip地址后根据ip地址向该服务器发起请求，服务器接收到请求之后，返回相应的数据（html css js）。如果我们在前端设置了重定向，跳转到 www.test.com/home，在前端会进行匹配对应的组件然后将其渲染到页面上。此时，如果我们刷新页面的话，浏览器会发送新的请求：www.test.com/home，如果后端服务器没有/home对应的接口，那么就会返回404.

生产环境刷新404的解决办法可以在nginx做代理转发，在nginx中配置按顺序检查参数中的资源是否存在，如果都没有找到，让nginx内部重定向到项目首页。

image.png

2.2.3.2 开发环境-historyApiFallback

那为什么开发环境时就不会出现404呢？因为在vue-cli 中 webpack 帮我们做了处理：