路由——hash模式和history模式

在单页面应用中，路由是必不可少的被使用到，面试的过程中也不可避免的被问道，所以有必要理解一下路由的实现原理

单页面（SPA）——就是指整个前端服务中就只有一个index.html的静态文件，前端项目开发完成部署到服务器上之后，用户访问的始终是这个静态页面，而页面中呈现出来的所有交互，

例如页面跳转，数据跳转等都是在这一个面中完成的。

1—hash模式

 　　（1）hash模式下地址栏中带#，路由地址就是#后面的内容，切换路由，变化的是#后面的内容

　　 （2）hash模式下url变化是通过浏览器的hashchange方法监听的

 　　（3）hash的兼容性更好，甚至能兼容低版本的ie浏览器

　　 （4）hash模式下路由改变后手动刷新页面不会报错（404），因为hash模式请求页面的地址永远是# 前面的内容，所以总是能请求成功，得到index.html页面，再通过路由渲染显示对应得组件

2—history模式

　　（1）history模式下地址栏中没有#，从视觉上更加美观

　　（2）history路由的实现主要依赖于html5提供的history全局对象，这个全局对象暴露了一些有用的方法：

　　　　window.history.go：可以跳转到浏览器会话历史中指定的某一个记录页（简单理解：可以跳转到曾经访问过的某一个页面）

　　　　window.history.forward ：可以跳转到浏览器会话历史中的下一页，和前进按钮相同

　　　　window.history.back：可以跳转到浏览器会话历史中的上一页，和后退按钮相同

　　　　window.history.pushState：可以将指定的路由数据push压入到浏览器历史会话栈里面，会使得浏览器会话栈的长度增加，即history.length + 1

　　　　window.history.replaceState：可以将当前页面的url替换成指定的url, 不会改变浏览器会话栈的长度，即history.length 不变

　　　　popstate:该事件只会被上述方法中前三种触发，pushState,replaceState 事件不会触发该事件

　　 （3）history模式下手动刷新页面出现404错误的原因：因为history模式请求页面的地址是地址栏里面全部的内容

　　　　例如: http://192.168.30.161:5500/home  在页面不刷新的情况下默认访问的始终是路径下的index.html即http://192.168.30.161:5500/index.html,但一旦刷新页面后

　　　　访问的就是：http://192.168.30.161:5500/home/index.html，很明显服务器没有这个资源，所以会出现404错误

　　　　因此使用history模式的路由时需要配置nginx,告诉浏览器，当访问的资源不存在时，默认访问静态资源下的index.html