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;)。