vue-router原理

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会触发。
当切换时加载的不是同一文档也不会触发。