Router路由

路由原理

前端路由实现起来其实很简单，本质就是监听 URL 的变化，然后匹配路由规则，显示相应的页面，并且无须刷新。目前单页面使用的路由就只有两种实现方式

• hash 模式 #
• history 模式

Hash

www.test.com/#/ 就是Hash URL，当#后面的哈希值发生变化时，不会向服务器请求数据，可以通过 hashchange 事件来监听到 URL 的变化，从而进行跳转页面。

当 www.test.com/#/ => www.test.com/#/123

A.点击跳转/浏览器历史跳转 => 触发hashChange事件 => 解析URL => 匹配到对应的路由规则，跳到123页面

B.手动刷新 => 不会向服务器发出请求，但是也不会触发hashChange事件，可以通过load事件 => 解析URL => 匹配到对应的路由规则，跳到123页

History模式

当 www.test.com/#/ => www.test.com/#/123

A.浏览器动作 回退 或history.back() => 触发popstate事件 => 解析URL => 跳到123页 B.点击跳转 => 调用pushState 函数向浏览器历史添加一个状态，并且不会向服务器请求 => 解析URL => 跳到123页 C.刷新页面/输入URL => 会向服务器请求，所以使用history方式需要后端配合重定向 => 解析URL => 跳到123页

事件

popstate

• 当做出浏览器动作时，会触发 popstate 事件, 也就是说，popstate 本身并不是像 pushState 或 replaceState 一样是 history 的方法。
• 不能使用 history.popState 这样的方式来调用。
• 而且，直接调用 history.pushState 或 history.replaceState 不会触发 popstate 事件。