路由原理

Author: YuChengKai

Framework/framework-zh.md

@@ -402,3 +402,17 @@ handle() {
 }
 ```
 
+# 路由原理
+
+前端路由实现起来其实很简单，本质就是监听 URL 的变化，然后匹配路由规则，显示相应的页面，并且无须刷新。目前单页面使用的路由就只有两种实现方式
+
+- hash 模式
+- history 模式
+
+`www.test.com/#/` 就是 Hash URL，当 `#` 后面的哈希值发生变化时，不会向服务器请求数据，可以通过 `hashchange` 事件来监听到 URL 的变化，从而进行跳转页面。
+
+![](https://user-gold-cdn.xitu.io/2018/7/11/164888109d57995f?w=942&h=493&f=png&s=39581)
+
+History 模式是 HTML5 新推出的功能，比之 Hash URL 更加美观
+
+![](https://user-gold-cdn.xitu.io/2018/7/11/164888478584a217?w=1244&h=585&f=png&s=59637)