JavaScript模拟SPA路由hash模式@小四

作者: 王云飞_小四_wyunfei | 来源:发表于2018-12-25 18:03 被阅读0次

JavaScript模拟SPA路由hash模式@小四
vue-routes 基础（二）
SPA 路由history模式上线后刷新404 @令狐张豪
Hash Vs H5 History
Vue 路由模式切换
Vue路由-history模式
vue-router的两种模式
前端路由
(Vue-cli)四、路由进阶（二级路由&路由懒加载&scope
Vue的两种路由模式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>一站式</title>
        <style>
            *{ margin: 0; padding: 0;}
            ul li{ list-style: none; float: left; margin-left: 24px;}
            div{ display: none;}
        </style>
    </head>
    <body>
        <ul>
            <li><a href="javascript:;" data-hash='index'>王云飞</a></li>
            <li><a href="javascript:;" data-hash='student'>小四</a></li>
            <li><a href="javascript:;" data-hash='message'>同学们听我说</a></li>
        </ul>
        <br />
        <div data-hash='index'>王云飞是一个，做事有恒心有毅力，处事有自己的见解，而不人云己云</div>
        <div data-hash='student'>小四是一个，心地善良，为人诚实，一心一意，精明能干，个性稳重，用心主动</div>
        <div data-hash='message'>同学们听我说 这是一个 高质量大前端公众号
<img src="https://img.haomeiwen.com/i15311104/f9d1c23b2b18ce2d.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" />
</div>
        <script>
            var aA=document.getElementsByTagName('a');
            var aDiv=document.getElementsByTagName('div');
            
            for(var i=0;i<aA.length;i++)
                {
                    aA[i].onclick=function()
                        {
                            var hash=this.dataset.hash;
                            window.location.hash=hash;  //添加hash值
                            for(var i=0;i<aDiv.length;i++)
                                {
                                    aDiv[i].style.display='none';
                                    if(aDiv[i].dataset.hash==hash)
                                        {
                                            aDiv[i].style.display='block';
                                        }
                                }
                        }
                    
                    
                }
                
            var firshHash=window.location.hash.substring(1);    //默认显示
            for(var i=0;i<aDiv.length;i++)
                {
                    if(aDiv[i].dataset.hash==firshHash)
                        {
                            aDiv[i].style.display='block';
                        }
                }
                
            window.onhashchange=function()  //回车更新地址
                {
                    window.location.reload()
                }
        </script>
    </body>
</html>

同学们听我说