vue路由模式解析

1、路由是由多个url组成,使用不同的url可以相应的导航到不同的位置

2、浏览器中对页面的访问是无状态的,所以我们在切换不同的页面时都会重新进行请求,而实际使用vue和vue-router开发就会明白,在切换页面时是没有重新进行请求的,使用起来就好像页面是有状态的,这是什么原因呢。这其实是借助了浏览器的History API来实现的,这样可以使得页面跳转而不刷新,页面的状态就被维持在浏览器中了

3、hash模式原理:window.onhashchange事件

  关键的一点是:因为hash发生变化的url都会被浏览器记录下来,从而你会发现浏览器的前进后退都可以用了,同时点击后退时,页面字体颜色也会发生变化。这样一来,尽管浏览器没有请求服务器,但是页面状态和url一一关联起来,后来人们给它起了一个霸气的名字叫前端路由,成为了单页应用标配。

4、history模式:切换(back / forward / go)和修改(pushState / replaceState)

  通过pushstate把页面的状态保存在state对象中,当页面的url再变回这个url时,可以通过event.state取到这个state对象,从而可以对页面状态进行还原,这里的页面状态就是页面字体颜色,其实滚动条的位置,阅读进度,组件的开关的这些页面状态都可以存储到state的里面。

posted @ 2020-06-08 15:53  千年轮回  阅读(391)  评论(0编辑  收藏  举报