原理

其实就是根据a标签实现，阻止a标签的默认行为，在重新指定他的跳转
hash模式

<body>
    <div style="display: flex;flex-direction: column; justify-content: center;align-items: center">
        <a href="hh">1</a>
        <a href="hh">2</a>
        <a href="hh">3</a>
        <a href="hh">4</a>
        <a href="hh">5</a>
    </div>
<script>
    var as = document.querySelectorAll('a')
    Array.from(as).forEach(node=>{
        node.addEventListener('click', function (e) {
            e.preventDefault()
            //简单模拟vue-router
            location.hash = node.textContent
        })

    })
</script>

history模式

<body>
    <div style="display: flex;flex-direction: column; justify-content: center;align-items: center">
        <a href="hh">1</a>
        <a href="hh">2</a>
        <a href="hh">3</a>
        <a href="hh">4</a>
        <a href="hh">5</a>
    </div>
<script>
    var as = document.querySelectorAll('a')
    Array.from(as).forEach(node=>{
        node.addEventListener('click', function (e) {
            e.preventDefault()
            //简单模拟vue-router
            location.href = node.textContent
        })

    })
</script>