• 稍微复杂一点的SPA，都需要路由
  • vue-router 也是 vue 全家桶的标配之一

vue-router的路由模式
hash
h5 history

网页 url 组成部分

  1. // http://127.0.0.1:8881/01-hash.html?a=100&b=20#/aaa/bbb
  3. location.protocol // http:
  4. location.hostname // 127.0.0.1
  5. location.host // 127.0.0.1:8881
  6. location.port // 8881
  7. location.pathname // /01-hash.html
  8. location.search // ?a=100&b=20
  9. location.hash // #/aaa/bbb

hash 的特点

hash 变化会触发网页跳转，即浏览器的前进、后退
hash 变化不会刷新页面，SPA必须的特点
hash 永远不会提交到 server 端（前端自生自灭）

  1. /*
  2.   hash 变化，包括：
  3.   · JS 修改 url
  4.   · 手动修改 url 的 hash
  5.   · 浏览器前进、后退
  6. */
  7. // window.onhashchange
  8. window.addEventListener('hashchange', (event) => {
  9.   console.log(`old url：${event.oldURL}`)
  10.   console.log(`new url：${event.newURL}`)
  11.   console.log(`hash：${location.hash}`)
  12. })
  14. // 页面初次加载、获取hash
  15. document.addEventListener('DOMContentLoaded', () => {
  16.   console.log(`hash：${location.hash}`)
  17. })
  19. // JS 修改 url
  20. document.getElementById('btn1').addEventListener('click', () => {
  21.   location.href = '#/user'
  22. })

初次打开，没有hash的页面
截屏2020-10-21 下午3.34.50.png
点击修改hash的按钮
截屏2020-10-21 下午3.52.33.png
然后手动修改url的hash，页面也不刷新，但是会触发
截屏2020-10-21 下午3.53.56.png
同时浏览器也可以前进后退。这个就是vue-router或者react-router实现hash的基本原理