VUE路由原理

1: hash

2: history

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

 

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

 

hash模式:

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

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

    

history模式:

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

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

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

 

 

 

 

 

posted @ 2019-11-30 23:47  gm601630330  阅读(828)  评论(0编辑  收藏  举报