VUE路由原理

Posted 2020-11-26 guanm

1: hash

2: history

区别： 前者地址栏会带有#，后者没有，显得美观一点

 

路由原理：前段路由实现本质是监听URL的变化，然后匹配路由规则显示相应页面，并且无须刷新。

 

hash模式：

      a: 点击或浏览器历史跳转时，触发onhashchange事件,然后根据路由规则匹配显示相应页面(遍历路由表，装载相应组件到router-link)；

      b: 手动刷新时,不会像服务器发送请求（不会触发onhashchange），触发onload事件，然后根据路由规则匹配显示相应页面；

    

history模式：

     a:跳转时会调用history.pushState方法,根据to属性改变地址，并切换相应组件到router-link;

     b:浏览器历史操作（前进，后退）,只会改变地址栏（页面内容不会变）,不会切换组件，需要使用popstate方法来切换组件；

     c: 手动刷新,需要后端配合重定向，不然404