路由就是浏览器地址栏中的 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 则会替换当前的历史记录。