如何用 JS 实现 hash 路由

前端路由原理

  • vue-router 的路由模式
  • hash
  • H5 history

网页 url 组成部分

// http://localhost:8080/test/test.html?a=100#100
console.log(location.protocol) // http:
console.log(location.host) // localhost
console.log(location.port) // 8080
console.log(location.pathname) // /test/test.html
console.log(location.search) // ?a=100
console.log(location.hash) // #100

hash 的特点

  • hash 变化会触发网页跳转,即浏览器的前进,后端
  • hash 变化不会刷新页面,SPA 必需的特点
  • hash 永远不会提交到 server 端(前端自生自灭)

演示一下

<button id="btn">修改 hash</button>
<script>
    // hash 变化,包含:
    // a. JS 修改 url
    // b. 手动修改 url 的 hash
    // c. 浏览器前进、后退
    window.onhashchange = (e) => {
        console.log('old url', e.oldURL)
        console.log('new url', e.newURL)
        console.log('hash', location.hash)
    }
    // 页面初次加载,获取 hash
    document.addEventListener('DOMContentLoaded', () => {
        console.log('hash:', location.hash)
    })
    // JS 修改 url
    document.getElementById('btn').addEventListener('click', () => {
        location.href = '#/user'
    })
</script>

以上一开始为空,点击一下触发 onhashchange 输出:

// 一开始为空,点击一下触发 onhashchange
// hash:
// old url http://localhost/test/test.html
// new url http://localhost/test/test.html#/user
// hash #/user