Vue路由跳转原理（哈希模式）
概述哈希模式（利用`hashchange` 事件监听 url的hash 的改变）```window.addEventListener('hashchange', function(e) {console.log(e)})```核心是锚点值的改变，我们监听到锚点值改变了就去局部改变页面数据，不做跳转。跟传统开发模式url改变后 立刻发起请求，响应整个页面，渲染整个页面...
·
概述
哈希模式（利用`hashchange` 事件监听 url的hash 的改变）
```
window.addEventListener('hashchange', function(e) {
console.log(e)
})
```
核心是锚点值的改变，我们监听到锚点值改变了就去局部改变页面数据，不做跳转。跟传统开发模式url改变后 立刻发起请求，响应整个页面，渲染整个页面比路由的跳转用户体验更好
代码
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<a href="#/login">登录</a>
<a href="#/register">注册</a>
<div id="app"></div>
<script type="text/javascript">
var appdiv=document.getElementById('app')
window.addEventListener('hashchange', function(e) {
console.log(location.hash)
switch(location.hash){
case '#/login':
appdiv.innerHTML='我是登录页面';
break;
case '#/register':
appdiv.innerHTML='我是注册页面';
break;
}
})
</script>
</body>
</html>
运行效果
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献1条内容
所有评论(0)