前端培训-前端怎么控制管理路由

路由就是浏览器地址栏中的 url 与所见网页的对应关系

前端路由的实现方式：

基于 hash （ ocation.hash+hashchange 事件）

展示层面也就是切换 # 后面的内容，呈现给用户不同的页面。现在越来越多的单页面应用，基本都是基于 hash 实现

特性：

url 中 hash 值的变化并不会重新加载页面

hash 值的改变，都会在浏览器的访问历史中增加一个记录，也就是能通过浏览器的回退、前进按钮控制 hash 的切换

我们可以通过 hashchange 事件，监听到 hash 值的变化，从而响应不同路径的逻辑处理

基于 istory 新 API （ history.pushState()+popState 事件）

window.history.pushState(null, null, "http://www.atguigu.com");

这两个 API 的相同之处是都会操作浏览器的历史记录，而不会引起页面的刷新。不同之处在于，pushState 会增加一条新的历史记录，而 replaceState 则会替换当前的历史记录。