javascript中路由跳转的原理

最新推荐文章于 2024-05-08 16:08:00 发布

huxiaoxiao.

最新推荐文章于 2024-05-08 16:08:00 发布

阅读量1.1k

点赞数

分类专栏： vue 文章标签：前端 vue.js

本文链接：https://blog.csdn.net/lolhuxiaotian/article/details/121968349

版权

vue 专栏收录该内容

65 篇文章 2 订阅

订阅专栏

前端路由，是一个前端不同页面的状态管理器。

（路由，讲白了，就是页面跳转，这个跳转里面涉及到的路径是

相对路径 /login /regPage）

客户端中的路由，实际上就是dom元素的显示和隐藏。

当页面中显示home内容的时候，about中的内容全部隐藏，反之也是一样。

客户端路由有两种实现方式：基于hash 和基于html5 history api.

路由有两种不同方式的方式： Hash 和 History

举个例子：

  <style>
        .main ul li{
            width: 160px;
            height: 26px;
            line-height: 26px;
            list-style: none;
            float: left;
        }
        .container{
            width: 500px;
            height: 300px;
            border: 1px solid blue;
        }
        .p{
            clear: both;
        }
    </style>
</head>
<body>
    <div class="main">
        <h2>京东</h2>
        <ul>
            <li><a href="#/a">登录</a></li>
            <li><a href="#/b">注册</a></li>
            <li><a href="#/c">用户中心</a></li>
        </ul>
        <div class="p"></div>
        <div class="container" id="container">
            首页
        </div>
    </div>


    <script>
        window.onload = function(){
            // 当窗口中的hash值发生变化的时候，我们触发调用onhashchange()
            window.onhashchange = function(){
                console.log(location.hash);
                switch(location.hash){
                case '#/a':
                container.innerHTML = '66666';
                    break;
                case '#/b':
                container.innerHTML = '888';
                    break;
                case '#/c':
                container.innerHTML = '777';
                    break;
            }
            }
        }
    </script>

当点击上面的按钮时查看控制台：

不是很熟，回头搞懂了再来优化一下，大致原理就是这样

huxiaoxiao.

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript中路由跳转的原理

前端路由，是一个前端不同页面的状态管理器。（路由，讲白了，就是页面跳转，这个跳转里面涉及到的路径是相对路径 /login /regPage）客户端中的路由，实际上就是dom元素的显示和隐藏。当页面中显示home内容的时候，about中的内容全部隐藏，反之也是一样。客户端路由有两种实现方式：基于hash 和基于html5 history api.路由有两种不同方式的方式： Hash 和 History举个例子： <style> ...
复制链接

扫一扫