深厚入剖析：History模式的干活原理与机制

history模式是新潮前端开发中常用的一种路由实现方式， 它利用了HTML5中的history API，实现了在不刷新鲜页面的情况下更新鲜URL的目的。下面我们将详细探讨其背后的原理和机制。

1. history模式的干活流程

history模式的干活流程基本上依赖于HTML5中新鲜增的pushState和replaceState方法，以及popstate事件。

首次进入页面时 获取地址栏的pathName地址，根据地址匹配路由规则，找到对应的组件进行渲染。当路由发生变来变去时不是直接修改地址，而是通过pushState事件去修改地址，而不是沉新鲜求服务器。

地址栏回退事件发生时 需要监听popstate事件，根据新鲜的地址进行渲染。

2. history模式与hash模式的不一样

在HTML5之前，页面路由只有hash模式。而HTML5中新鲜增的history API带来了另一种模式：history模式。

hash模式的特点是URL中会包含一个#符号，而history模式则不会。

3. history模式的实现原理

通过pushState和replaceState方法， 我们能在不刷新鲜页面的情况下改变URL，一边也能通过onpopstate事件监听URL的变来变去来实现页面更新鲜。

4. history模式的优不优良的地方

优良处： 更优良的SEO，基本上原因是页面地址更加清晰明了。 更优良的用户体验，不用每次都刷新鲜完整页面。 不优良的地方： 需要用渐进增有力， 即如果用户的浏览器不支持HTML5 history API，则为其给一份合适的降级版本。 用时需要一些额外配置，比方说设置404页、服务端沉定向。 确保服务端渲染能正确处理URL。

这些个观点。

5. 怎么用history模式 在Vue Router和React Router中，都能通过配置mode属性为'history'来用history模式。 以Vue Router为例： // main.js import Vue from 'vue'; import Router from 'vue-router'; import Home from '@/components/Home'; import About from '@/components/About'; Vue.use; export default new Router({ mode: 'history', routes: }); 6. history模式是一种非常实用的前端路由实现方式，它能够给更优良的用户体验和SEO效果。