前端路由原理及hash模式和history模式和Abstract模式

1.前端路由原理：

前端路由的核心在于改变视图的同时不会向后端发出请求，而是去加载路由对应的组件；

vue-router是将组件映射到路由，然后在渲染出来，并且实现Hash、History、Abstract这三种模式，一般默认Hash模式。

2.Hash模式、History模式、Abstract模式

2.1 Hash模式：

Hash模式是指url尾巴后的 # 号以及后面的字符。hash虽然出现在url中，但不会被包括在http请求中，对后端完全没有影响，因此改变hash不会被重新加载页面。

原理：

基于浏览器的hashchange事件，地址变化时，通过window.location.hash获取地址上的hash值，并通过构造Router类，配置routes对象设置hash值与对应的组件内容。

优点：

1.hash值会出现在url中，但是不会被包含在Http请求中，因此hash值改变不会重新加载页面

2.hash改变会触发hashchange事件，能控制浏览器的前进后退

3.兼容性好

缺点：

1.地址栏中携带 # ，不美观

2.只可修改 # 后面的部分，因此只能设置与当前url同文档的 url

3.hash有体积限制，只能添加短字符串

4.设置的新值必须与原来不一样才会触发hashchange事件，并将记录添加到栈中

5.每次url的改变不属于一次http请求，所以不利于SEO优化

2.2 History模式：

在history模式中url就像正常的url,不过这种模式需要后台配置的支持，因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器中直接访问的时候就会返回404；（类似格式：http://CSDN/user/123456）

原理：

基于HTML5新增的pushState()和replaceState()两个api,以及浏览器的popstate事件，地址变化时，通过window.location.pathname找到对应的组件。并通过构造Router类，配置routes对象设置pathname值与对应的组件内容

优点：

1.没有 # ，更美观

2.pushState()设置的新url 可以是与当前url 同源的任意url

3.pushState()设置的新url 可以与当前url一模一样，这样也会把记录添加到栈中

4.pushState()通过stateObject参数可以添加任意类型的数据到记录中

5.pushState()可额外设置title属性拱后续使用

6.浏览器的前进后退能触发浏览器的popstate事件，获取window.location.pathname来控制页面的变化

缺点：

URL的改变属于http请求，借助history.pushState实现页面的无刷新跳转，因此会重新请求服务器。所以前端的 URL 必须和实际向后端发起请求的 URL 一致。如果用户输入的URL回车或者浏览器刷新或者分享出去某个页面路径，用户点击后，URL与后端配置的页面请求URL不一致，则匹配不到任何静态资源，就会返回404页面。所以需要后台配置支持，覆盖所有情况的候选资源，如果 URL 匹配不到任何静态资源，则应该返回app 依赖的页面或者应用首页。
兼容性差，特定浏览器支持

2.3 Abstract模式：

Abstract模式支持所有的js运行模式。vue-router自身会对环境做校验，如果发现没有浏览器的API，路由会自动强制进入abstract模式，在移动端原生环境中也是使用abstract模式。

**修改路由模式：**在实例化路由对象时，传入mode选项和值修改。

路由模块的本质就是建立起url和页面之间的映射关系，"更新视图但不重新请求页面"是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有两种方式：利用 url 中的hash('#') 和利用History在 Html5中新增的方法

hash模式：在浏览器中符号 # 以及 # 后面的字符称之为hash ，用window.location.hash读取，使用hashchange事件来监听hash值的变化，从而对页面进行跳转（渲染）

History模式：history模式采用html5的新特性，并且提供了两个新的方法：pushState(), replaceState()可以对浏览器历史记录栈进行修改，以及popState事件可以监听状态变更；