前端路由原理?两种路由的实现方式有什么区别?
一般比较
hash history abstract 前端路由主要应用在SPA(单页面开发)项目中。在无刷新的情况下,根据不同的URL来显示不同的组件或者内容。
1.hash模式
www.test.com/#/就是 Hash URL,当#后面的哈希值发生变化时,可以通过hashchange事件来监听到 URL 的变化,从而进行跳转页面,并且无论哈希值如何变化,服务端接收到的 URL 请求永远是www.test.com。Hash 模式相对来说更简单,并且兼容性也更好。每一次改变#后的部分,都会在浏览器的访问历史中增加一个记录,使用"后退"按钮,就可以回到上一个位置。
2.history模式
History模式是HTML5 新推出的功能,主要使用history.pushState和history.replaceState改变 URL。通过 History 模式改变 URL 同样不会引起页面的刷新,只会更新浏览器的历史记录。当用户做出浏览器动作时,比如点击后退按钮时会触发popState事件。
*popstate 事件*当用户点击浏览器的「前进」、「后退」按钮时,就会触发popstate事件。你可以监听这一事件,从而作出反应。
这里e.state就是当初pushState时传入的第一个参数,state 对象可以是任何可以序列化的东西。由于火狐会将这些对象存储在用户的磁盘上,所以用户在重启浏览器之后这些state对象会恢复。
*replaceState 方法*有时,你希望不添加一个新记录,而是替换当前的记录(比如对网站的 land