前端与后端路由解析-优快云博客

本文链接：https://blog.youkuaiyun.com/liusuyun_1/article/details/105565030

你了解路由吗

1、什么是路由？

路由是根据不同的url地址展示不同的内容或页面，分为前端路由和后端路由

2、什么是前端路由？什么是后端路由？

前端路由是把不同的url对应不同的内容或页面的任务交给前端来做，每跳转到不同的url都是使用前端的锚点路由，随着单页应用的不断普及，前后端开发分离，目前项目基本是使用前端路由，在项目使用期间页面不会重新加载
后端路由是浏览器在地址栏中切换不同的url时，每次都是向后台服务器发起请求，服务器响应请求，在后台拼接html文件传给前端显示，返回不同的页面，意味着浏览器会刷新页面

3、什么时候会使用前端路由？

在单页面应用，大部分页面结构不变，只改变部分内容的使用

4、前端路由和后端路由的优缺点？

前端路由：
优点：
1、用户体验好，和后台网速没有关系，不需要每次都从服务器全部获取，快速展现给用户
2、可以在浏览器中输入指定想要访问的url路径地址
3、实现了前后端的分离，方便开发，有很多框架都带有路由功能模块
缺点：
1、使用浏览器的前进、后退键的时候会重新发送请求，没有合理利用缓存
2、单页面无法记住之前滚动的位置，无法在前进，后退的时候记住滚动的位置
后端路由：
优点：分担前端的压力，html和数据的拼接都是有服务器完成
缺点：当项目庞大时，加大了服务器端的压力，同时在浏览器不能输入指定的url路径进行指定模块的访问，当网速过慢，延迟页面的加载，用户体验不好

4、前端路由有几种方案？

两种:hash和history
1、hash (带有#，例如https://editor.csdn/#/xx)
实现原理：监听#后面的内容来发起Ajax请求来进行局部更新，而不需要刷新整个页面
方法：hashchange ----- 每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录，使用后退按钮就可以回到上一个位置，可用onhashchange事件去监测hash的变更
三种实现方式：

1、window.onhashchange = func;
2、<body onhashchange="func();">
3、window.addEventListener("hashchange",func,false);

2、history (没有#)
实现原理：HTML5新增的历史记录API可以实现无刷新更改地址栏链接，配合AJAX可以做到无刷新跳转
属性：
a、History.length:当前窗口访问过得网址数量
b、History.state:History 堆栈最上层的状态值
方法：
a、History.back()
b、History.forward()
c、History.go()
d、History.pushState() (window.history.pushState(state, title, url))
e、History.replaceState()
f、popstate(用户点击浏览器倒退按钮和前进按钮，或者使用 JavaScript 调用History.back()、History.forward()、History.go()方法时才会触发)

5、hash和history的区别？

1、pushState设置的新的url可以是同源下的任意url,而hash只能修改#后面的部分
2、pushState设置的新的url可以与当前url一样，这样也会把记录添加到栈中，hash设置的新值不能与原来的一样，一样的值不会触发动作将记录添加到栈中
3、pushState通过stateObject参数可以将任何类型的数据添加到记录中，hash只能添加短字符串
4、pushState可以设置额外的title属性供后续使用
5、history在刷新页面时，如果服务器中没有相应的响应或者资源，就会出现404，hash模式下，仅#之前的内容包含在http请求中，对后端来说即时没有对路由做到全面覆盖，也不会报404