在单页应用如此流行的今天,曾经令人惊叹的前端路由已经成为各大框架的基础标配,每个框架都提供了强大的路由功能,导致路由实现变的复杂。
一、首先了解什么是路由
路由的概念来源于服务端,在服务端中路由描述的是 URL 与处理函数之间的映射关系。
在 Web 前端单页应用 SPA(Single Page Application)中,路由描述的是 URL 与 UI 之间的映射关系,这种映射是单向的,即 URL 变化引起 UI 更新(无需刷新页面)。具体的现象可以参考网易官网以及掘金了解观察,点解切换页面的时候,页面是否刷新了。
二、 具体该如何使用以及有哪几种呢
hash:
- 区别:url地址上面有#,hash是URL#中的后面的那一部分;
- 通过 hashchange 事件监听 URL 的变化,改变 URL 的方式只有这几种:通过浏览器前进后退改变 URL、通过
<a>标签改变 URL、通过window.location改变URL,这几种情况改变 URL 都会触发 hashchange 事件; 3.刷新页面:不会不发生请求,页面不会有任何问题,不需要后端配合
history:
- url上面没有#
- 实现的原理:利用history api来实现popState() pushState()来实现的;
- 刷新页面:会发送请求然后会导致页面出现找不到404 需要后端配合解决;