首页 > 其他 > 详细

vue-router原理

时间:2020-05-02 10:43:07      阅读:57      评论:0      收藏:0      [点我收藏+]

vue-router包含三种模式:

  • history,通过history API 实现
  • hash,通过onhashChange事件实现
  • abstract

hash模式实现原理

  • 将mode更改为hash
  • 设置a标签为跳转链接
    <a href=‘#/index‘ class=‘hashlink‘>首页</a>
    
  • 监听a标签的点击事件,阻止默认跳转,并更改浏览器的hash值
    var aObjs = document.querySelectorAll(‘.hashlink‘);
    aObjs.forEach(item => {
        item.addEventListener(‘click‘, function(e){
        e.preventDefault();
        let link = item.textContent;
        location.hash = link;
        }
    }, false)
    
  • 监听hash值的变化,进行组件跳转
    window.addEventListener(‘hashchange‘, function(){
        // 根据更改后的hash值切换组件
    }, false) 
    

注意:hash值只是#号后面的内容

onhashchange事件触发情景
  • 直接更改浏览器地址,在最后加上或更改#hash
  • 改变location.hash 或 location.href
  • 触发带锚点的链接
  • 浏览器前进后退,前hash值不同

history模式实现原理

  • 将mode更改为history
  • 将a标签的href去掉#
  • 监听a标签点击事件,阻止默认跳转,并更改浏览器的history
    var aObjs = document.querySelectorAll(‘.hashlink‘);
    aObjs.forEach(item => {
        item.addEventListener(‘click‘, function(e){
        e.preventDefault();
        let link = item.textContent;
        if(!!window.history && window.history.pushState){
            history.pushState({name: ‘history‘, link, link})    
        }
        }
    }, false)
    
  • 监听history对象的变化,进行路由切换
    history.addEventListener(‘popstate‘, function(){
        
    })
    
    

注意:当浏览器不支持history模式时,会默认降级到hash模式处理

popstate事件

只有在history对象改变时触发,如果仅仅调用pushState或replaceState事件不会触发。调用history.go或history.back或history.forward会触发。
当切换时加载的不是同一文档也不会触发。

vue-router原理

原文:https://www.cnblogs.com/ashen1999/p/12816897.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!