前端路由原理

1、为什么前后端分离

    前后端通过ajax调用http请求接口，获取json数据，需约定好数据格式，前后端分别部署，是两个工程

    前端和后端开发人员的分工明确，利于他们的术业专攻，不然的话，前后端对接容易出错

    不分离的话，后端服务器压力太大，性能不好，用户体验差

    好处：前后端分工明确，提升开发效率；使用前端服务器，整体响应速度块，用户体验好；减少后端服务器压力，防止宕机等现象。

2、前后端路由的区别

    路由就是根据不同的url展示不同的页面或内容，研究室url到函数的映射

    后端路由：每次路由跳转都会请求html页面，项目过大时，请求时间长，容易白屏，用户体验差

    前端路由：项目使用期间，路由跳转，页面不刷新，不重新加载，简单说就是更新视图但不重新请求页面；根据不同的url，跳转到不同的锚点，显示不同的内容；缺点，使用浏览器的前进、后退时，会刷新页面，没有合理利用缓存；单页面应用前进、后退时，无法记住滚动位置。优点，用户体验好，因为不用每次去请求页面；前后端分离开发，开发效率高

3、vue路由原理

    hash模式：每一次改变hash(window.location.hash)，都会在浏览器访问历史中增加一个记录。window.addEventListerner("hashChange", () => {}, false)

    history模式：History interface是浏览器历史栈提供的api接口，通过back() go() forward()等方法，读取浏览器历史栈中的记录，进行各种跳转工作。H5中新增PushState()和ReplaceState()等接口，可以对浏览器历史栈进行操作。window.addEventListener("popState", () => {}, false)

    区别：popState设置的新url可以原url不同源，二hashChange只能改变#后面的部分；pushState(stateObject,title,URL)  popState可修改的stateObject类型较多，而hashChange只能是短字符串；popState还可以携带title，待后续使用；popState设置的新旧url可以不一样，页面也会触发跳转，二hashChange必须不一样才能跳转；history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，不然会404，需后端配合配置（配置try_files $uri $uri/ /index.html;）。