[聚焦Vue]4-6前端路由原理

url组成部分：http://127.0.0.1:8081/index.html?a=100&b=20#/add

• location.protocol http:
• location.hostname 127.0.0.1
• location.host 127.0.0.1:8081
• location.port 8081
• location.pathname index.html
• location.search ?a=100&b=20
• location.hash #/add

通过hash的变化触发路由的变化， hash特点：

• hash变化会触发网页跳转， 即浏览器的前进、后退
• hash变化不会刷新页面， SPA必需的特点

• hash永远不会提交到server端

  hash模式

  window.onhashchange进行监听, event.oldURL、event.newURL

  h5 history模式

• 用url规范路由， 跳转时不刷新页面

• history.pushState
• window.onpopstate

  history.pushState({name: 'list.html'}, '', 'list.html')
  window.onpopstate = event => {
    // 监听前进、后退；
    console.log('state', event.state, 'pathname', location.pathname);
  }

  popstate事件, 比如点击后退、前进按钮(或者调用history.back()、history.forward()、history.go()方法)，此外，a 标签的锚点也会触发该事件. popstate事件对象的state属性包含了这个历史记录条目的state对象的一个拷贝.

应用场景：to B的系统推荐用hash；to C的系统在使用H5 history , 需要服务端支持。