前端路由你知道多少

2018-12-06  本文已影响0人  mensionyu

hash模式实现

传统的超链接会打开一个新的页面,重度依赖于http协议,当只有后端路由时重新生成html网页 新的页面会有新的dom渲染的过程,会比较慢,会出现白屏的一下。影响体验

  <a href="./hello.html" class="btn">hello hash</a>
    <a href="./hi.html" class="btn">hi hash</a>

前端路由实现基于一个api history
当把超链接的地址写成如下时 带#

<a href="#/hello" class="btn">hello hash</a>
    <a href="#/hi" class="btn">hi hash</a>

获取页面的hashtag代码如下

 window.addEventListener('hashchange',e=>{
            var hastag=window.location.hash.substring(1);//
            console.log(window.location);
            console.log(hastag);
});

获取的数据如下,hashtag 当 点击超链接时,当点击不同的超链接时 仅仅是hashtag发生的变化 页面并没有刷新。而这时候控制页面不同部分的显示,似乎实现了前端路由的效果哦
所有 hashtag的意义就是 :不会产生页面的跳转,捕捉到事件,马上切出对应的组件。


image.png

更成熟的前端路由,既可以hash 亦可以path切换。

history.pushStatehistory.replaceState
两个神器的作用就是可以将url替换并且不刷新页面,好比挂羊头卖狗肉,http并没有去请求服务器该路径下的资源,一旦刷新就会暴露这个实际不存在的“羊头”,显示404。
两个API都接收三个参数:

状态对象(state object):一个JavaScript对象,与用pushState()方法创建的新历史记录条目关联。无论何时用户导航到新创建的状态,popstate事件都会被触发,并且事件对象的state属性都包含历史记录条目的状态对象的拷贝。

标题(title):FireFox浏览器目前会忽略该参数,虽然以后可能会用上。考虑到未来可能会对该方法进行修改,传一个空字符串会比较安全。或者,你也可以传入一个简短的标题,标明将要进入的状态。

地址(URL): 新的历史记录条目的地址。浏览器不会在调用pushState()方法后加载该地址,但之后,可能会试图加载,例如用户重启浏览器。新的URL不一定是绝对路径;如果是相对路径,它将以当前URL为基准;传入的URL与当前URL应该是同源的,否则,pushState()会抛出异常。该参数是可选的;不指定的话则为文档当前URL。

相同之处是两个API都会操作浏览器的历史记录,而不会引起页面的刷新。

不同之处在于pushState会增加一条新的历史记录,而replaceState则会替换当前的历史记录。
演示代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>history</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <style>
        .warp{
            width:400px;
            height:400px;
            border:1px solid grey;
            margin:0 auto;
        }
        .nav{
            border-bottom:1px solid grey;
        }
        .nav li{
            display:inline-block;
            list-style:none;
        }
        .nav li a{
            display:inline-block;
            text-decoration: none;
            padding:10px 15px;
        }
        .router{
            padding:20px;
        }
        a{
            cursor: pointer;
        }

    
    </style>
</head>
<body>
    <!-- //window.history.pushState(null,null,'#/hello) -->
    <section class="wrap">
        <div class="nav">
            <ul>
                <li><a href="javascript:;" deta-path="index">首页</a></li>
                <li><a href="javascript:;" data-path="news">新闻</a></li>
                <li><a href="javascript:;" data-path="about">关于</a></li>
            </ul>
        </div>
        <div id="root" class="router">

        </div>
    </section>
   

    <script>
        (function(){
            history.replaceState(null,null,'');
            $('#root').html(`<p>显示内容区</p>`)
            $('a').on('click',function(){
                var text=this.text;
                // console.log(text);
                var  url=this.text;
                window.history.pushState(text,text,`/${text}`);
                $('#root').html(`<p>${text}</p>`);
            })
            window.addEventListener('popstate',function(e){
                var text=e.state;
                console.log(e);
                $('#root').html(`<p>${text}</p>`)
            })
        })();
    
    </script>
</body>
</html>

笔记参考 html5 hiistory 模式

上一篇 下一篇

猜你喜欢

热点阅读