前端路由原理及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选项和值修改。