前端路由的由来可以理解成是基于SPA页面局部更新特点的,但是要解决SPA的两个问题:
- 改变URL不让浏览器向服务器发送请求
- 监听URL的变化,执行对应的操作
Hash模式
URL:www.baidu.com/#hashhash
特点:
- hash值的变化不会导致浏览器向服务器发送请求,不会引起页面刷新
- hash值的变化会触发hashchange事件,通知控制DOM对象的切换
- hash值变化会在浏览器的历史中留下记录,使用浏览器的后退按钮可以回到上一个hash的值
优点:兼容性好,支持低版本和IE浏览器;实现前端路由无需服务器支持
缺点:URL带有#符号,影响美观;URL路径只能存在一个#,会导致子应用和主应用在定义URL路径上存在困难
History模式
History模式不需要借助锚点技术重写URL路径,没有#。history模式采用的history对象中的pushState()函数重写URL路径,可在触达重新加载的情况下变更URL路径。需要在服务器端配置重定向。