前端路由模式的区别详解（hash 与 history）

设置方式

import VueRouter from 'vue-router'
const routes = [ ]

const router = new VueRouter({
	mode:'hash',// 或者 history
	routes
})

一、Hash 模式

将 URL 中的 # 后面的内容作为路径地址，通过监听 hashchange 事件，监视window.location.hash 的变化来实现的 。

1.1 # 即锚点

写过网页的伙伴应该都知道，通过 a 标签链接点击可以使页面滑动到对应的 id 容器的位置，就是因为锚点可以类似为一种书签，让浏览器到达书签的位置上，
使用 锚点 就代表会在存在的资源中寻找，而不会发送请求到服务器获取，从而页面并没有刷新

1.2 hashchange 事件

当URL的片段标识符（即#后面的内容）发生变化时触发的事件。可用于检测URL的变化，例如在单页面应用程序中，当用户导航到不同的页面时，可以使用hashchange事件来更新页面内容，而不必重新加载整个网页

简单点来说就是根据当前的路由地址找到对应组件进行重新渲染

1.3 应用场景：由于不需要服务端的支持，所以一般在生产/开发模式下使用，当项目上线时（有服务端的支持）应该改成 History 模式（美观）

二、History 模式

所有路由呈现都需要通过监听 popstate 事件，来进行相应的路由匹配和跳转

• 没有 “#” ，使用真正的 URL 路径 （美观）
• 通过使用 HTML5 提供的 history.pushState() 和 history.replaceState() 方法改变 URL 路径
• 监听 popstate 事件，来进行路由匹配和跳转

2.1 history.pushState()

可以用于向浏览器的历史记录中添加一个新的状态（state）和URL

• state：表示新的状态对象，可以是任何JavaScript对象。

• title：表示新的状态的标题，目前大多数浏览器都忽略该参数。

• url：表示新的URL，可以是相对URL或绝对URL。例如，以下代码会向浏览器的历史记录中添加一个新的状态，同时将当前浏览器的URL修改为https://example.com/user/123

和 window.location = “#foo” 基本一样，但是 window.location 得设置了锚 #foo 才会跳转，而 history.pushState() 不用，它会创建一条新的历史记录

• 当使用的 URL 是不带 “#” 时，当修改URL访问新页面时，页面不存在可能需要在服务端进行额外的配置来避免404错误等问题
• 使用这种可以使通过修改状态来使得页面无刷新地跳转

2.2 history.replaceState()

不会在浏览器的历史记录中添加新的状态，而是直接替换当前的状态

• state：表示新的状态对象，可以是任何JavaScript对象。

• title：表示新的状态的标题，目前大多数浏览器都忽略该参数。

• url：表示新的URL，可以是相对URL或绝对URL。
  例如，以下代码会将当前浏览器的URL修改为https://example.com/user/123，并更新状态对象为{ userId: 123 }：

2.3 popstate

• 当活动历史记录条目更改时，会触发 popstate 事件，例如浏览器的前进和后退（history.go() , history.back()或者history.forward() 方法）
• history.pushState() 和 history.replaceState() 的调用不会触发

三、总结

• URL 的区别
  hash 模式：使用 “#” 符号模拟路由，URL 不美观
  history 模式：没有使用 “#” 符号，而是使用真正的 URL , 美观
• 关于跳转到不存在的路径
  hash 模式：不会向后端发送请求
  history 模式：会向后端发送请求，如果后端没有配置则会出现 404，所以一般需要后端的支持
• 兼容性
  hash 模式：IE8，兼容性广
  history 模式：IE10 以上
• 应用场景
  hash 模式：适合生产/开发模式
  history 模式：项目在上线环境可以使用，用户体验好