Vue第九课路由之间的跳转原理

最新推荐文章于 2023-02-17 22:04:11 发布

qq_43538170

最新推荐文章于 2023-02-17 22:04:11 发布

阅读量343

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_43538170/article/details/112644471

版权

路由的跳转原理（哈希模式）

单页应用的路由模式有两种
- 哈希模式（利用hashchange 事件监听 url的hash 的改变）
- history模式（使用此模式需要后台配合把接口都打到我们打包后的index.html上）
哈希模式原理

window.addEventListener('hashchange', function(e) {
  console.log(e)
})

核心是锚点值的改变，我们监听到锚点值改变了就去局部改变页面数据，不做跳转。跟传统开发模式url改变后立刻发起请求，响应整个页面，渲染整个页面比路由的跳转用户体验更好

代码测试如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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':
                   //更新div数据
                   appdiv.innerHTML='我是登录界面'
                   break
               case '#/Register':
                   appdiv.innerHTML='我是注册界面'
                   break
        }
    })
    </script>
    
    
</body>
</html>

qq_43538170

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue第九课路由之间的跳转原理

路由的跳转原理（哈希模式）单页应用的路由模式有两种哈希模式（利用hashchange 事件监听 url的hash 的改变）history模式（使用此模式需要后台配合把接口都打到我们打包后的index.html上）哈希模式原理window.addEventListener('hashchange', function(e) { console.log(e)})核心是锚点值的改变，我们监听到锚点值改变了就去局部改变页面数据，不做跳转。跟传统开发模式url改变后立刻发
复制链接

扫一扫