vue-router原理及实现
原理
其实就是根据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>
阿里云成长空间 747人发布