前言:
路由这概念最开始是在后端出现的,在前后端不分离的时候,由后端来控制路由,服务器接收客户端的请求,解析对应的url路径,并返回对应的页面/资源。简单的说,路由就是根据不同的url地址来展示不同的内容或页面。
现在的网络应用程序越来越多的使用AJAX异步请求完成页面的无缝刷新,虽然Ajax解决了用户交互时体验的痛点,但是多页面之间的跳转一样会有不好的体验,所以便有了spa(single-page application)使用的诞生。而spa应用便是基于前端路由实现的,所以便有了前端路由。
路由的实现方式:
路由需要实现三个功能:
- 当浏览器地址变化时,切换页面;
- 点击浏览器【后退】、【前进】按钮,网页内容跟随变化;
- 刷新浏览器,网页加载当前路由对应内容;
在单页面web网页中, 单纯的浏览器地址改变, 网页不会重载,如单纯的hash网址改变网页不会变化,因此我们的路由主要是通过监听事件,并利用js实现动态改变网页内容,有两种实现方式:
- hash模式:监听浏览器地址hash值变化,执行相应的js切换网页;
- history模式:利用history API实现url地址改变,网页内容改变;
两者之间的区别就是hash会在浏览器地址后面增加#号,而history可以自定义地址。