js实现哈西路由原理

更新日期: 2019-04-03阅读: 2.4k标签: 路由

在 js 中,有一种方法,可以在不刷新页面的情况下,页面的内容进行变更,ajax 是一种,这里介绍另一种,就是 哈希路由原理。先看一个简单的路由和页面内容关联的例子,要实现两个功能:

1.1. 浏览器的路由变化,页面内容跟着变化

1.2.页面内容变换,浏览器的内容跟着变化

实现过程:

1.3.设定一个页面按钮,点击按钮时,改变页面的内容

1.4.设定浏览器的内容,跟随页面内容的变化而变化,即:直接赋值给浏览器的hash属性就可以了

1.5.监听浏览器的hash值,如果hsah改变了,则页面内容跟随变化

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload = function(){ 
            var  getoneNum = function(start,end){
                var rand_num = Math.random();
                var range = end - start ;
                return start + Math.round( (Math.random() * range) );
            };
            var getnums = function(start,end,n){
                var arr = [];
                for(var i=0;i<n;i++){
                    arr.push( getoneNum(start,end) );
                };
                return arr ;
            };
            function Ohash(){
                this.ospan = document.querySelector('.ospan');
                this.obtn = document.querySelector('input');
            };
            Ohash.prototype.bind = function(){
                var that = this;
                this.obtn.onclick = function(){
                      location.hash = getnums(3,108,6);
                      that.ospan.innerHTML = location.hash.substring(1) ;
                };
                window.onhashchange = function(){
                    that.ospan.innerHTML = location.hash.substring(1)||'' ;
                };
            };
            var Oha = new Ohash();
            Oha.bind();
        }
    </script>
</head>
<body>
    <div class='box'> 
       <input type="submit" value="触发按钮">
       <span class="ospan"></span>
    </div>
</body>
</html>

运行结果:实现了hash 值与页面内容的关联变化 


.类似的,通过页面的无刷新,仅改变页面的 hash 值,而达到页面内容的变更

2.1 构造一个路由函数

2.2 对路由的hash值进行监听,如果hash 发生改变,则执行加载函数

2.3 定义路由配置规则

2.4 对路由进行初始化即调用

html 代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./css/router.css">
    <script src="./js/router.js"></script>
    <style>
   
    </style>

</head>
<body>
    <header>这里是头部</header>
    <nav>
        <li><a href="#/">aluoa</a>  </li>
        <li><a href="#/01">huanying2015</a> </li>
        <li> <a href="#/02">一代天骄</a> </li>
        <li> <a href="#/03">霸王</a> </li>
        <li><a href="#/04">秦始皇</a> </li>
        <li><a href="#/05">释迦摩尼</a> </li>
    </nav>
    <section>
        如果想看路由改变效果,请点击左边的链接
    </section>
    <div class="clear"></div>
    <footer>这里是尾部</footer>
</body>
</html>

css 代码: 

header,footer{
        height:5em;
        background: #cba;
        text-align: center;
        line-height: 5em;
    }
    nav{
        width:20%;
        height:30em;
        background: #391;
        float:left;
    }
    li{
        height:2em;
    }

    section{
        width:80%;
        background: #9a1;
        height:30em;
        float:right;
        line-height: 2em;
        text-align: center;
    }
    .clear{
        clear:both;
    }

js代码: 

window.onload = function(){
    (function(){
        var Router=function(){
            this.routes={};
            this.curUrl='/';
        };
         // 对路由的hash值进行监听,如果发生改变,则调用reloadPage()函数
        Router.prototype.init= function(){
            // 这里的两个this 是不一样的,需要注意
            window.addEventListener('hashchange',this.reloadPage.bind(this) );
        };
        // 调用reloadPage函数,实际上时执行routes[]()函数
        Router.prototype.reloadPage = function(){
            this.curUrl = location.hash.substring(1)||'/';
            this.routes[this.curUrl]();
        };
          // 路由配置的规则
        Router.prototype.map = function(key,callback){
            this.routes[key] = callback;
        }
        window.Router = Router;
        })();

        var ORouter = new Router();
        ORouter.init();

        // 以下为路由配置的设置,形象的当做一个路由与调用函数的映射表也可以
        ORouter.map('/',function(){
            var Osect = document.querySelector('section');
            Osect.innerHTML = "欢迎来到火星,这是一次非常的旅行,祝您路途愉快!";
        });
         ORouter.map('/01',function(){
            var Osect = document.querySelector('section');
            Osect.innerHTML = "huanying2015 huanying2015 huanying2015 huanying2015 huanying2015 huanying2015 huanying2015 huanying2015 huanying2015 huanying2015 huanying2015 huanying2015 huanying2015 ";
        });
         ORouter.map('/02',function(){
            var Osect = document.querySelector('section');
            Osect.innerHTML = "hehehehehheeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeheheehehehhehehehhehehehehheeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeheheehehehhehehehhehehehehheeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeheheehehehheheheh";
        });
         ORouter.map('/03',function(){
            var Osect = document.querySelector('section');
            Osect.innerHTML = "nihao  nihao  nihao  nihao  nihao  nihao  nihao  nihao  nihao  nihao  nihao  nihao  nihao  nihao  nihao  nihao  nihao  nihao  nihao  nihao  nihao  nihao  nihao  nihao  ";
        });
         ORouter.map('/04',function(){
            var Osect = document.querySelector('section');
            Osect.innerHTML = "i am fine i am fine i am fine i am fine i am fine i am fine i am fine i am fine i am fine i am fine i am fine i am fine i am fine i am fine i am fine i am fine i am fine ";
        });
        ORouter.map('/05',function(){
            var Osect = document.querySelector('section');
            Osect.innerHTML = "good night ood night ood night ood night ood night ood night ood night ood night ood night ood night ood night ood night ood night ood night ood night ood night ood night ood night  ";
        });
}


 

 

 

链接: https://www.fly63.com/article/detial/2714

vue路由history模式_如何去除vue项目中的#

在使用vue-cli搭建的环境中,浏览器上URL地址中是存在#的,这是由于vue-router 默认 hash 模式,不难发现#的出现真的很丑陋。官网给出了如何使用history模式mode: history

vue路由传参主要的3种方式

vue中路由传参主要的3种方式:query方式(push时使用path来匹配)、params模式(push时使用name来匹配)、location预声明参数模式(push使用path来匹配,但是它跟params模式不同)

vue动态加载路由_实现vue动态加载路由器设置

我们的通用的后台管理系统中,我们会根据权限的粗细不同,会对每个角色每个权限每个资源进行控制。同样的我们也需要实现一个这样的功能。 这篇文章我将主要讲vue端的实现,关于后台接口我就不会涉及,当我接触的时候我们的后台接口是springcloud实现。

两种前端路由的实现方式

前后端分离开发模式,后端会把路由控制丢在前端,这几天再开发单页面小的项目,手动撸了个路由。前端路由实现有两种方法。HTML5 History API包括2个方法:history.pushState()和history.replaceState(),和1个事件:window.onpopstate。hash + location.onhashchange

vue动态路由_vue-router通过接口请求动态生成路由的实现

在后台管理系统中,一般都会采用权限管理。路由菜单数据都会保存到数据库中,在vue-router 2.2版本新增了一个router.addRoutes(routes)方法,即可用它来实现动态路由了

HTML5 History 模式

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

vue router 路由鉴权(非动态路由)

原本想用动态路由的思路去做,按权限加载对应路由表,但是由于权限可以交叉(比如一个人可以同时是主题管理员和数据服务管理员),导致权限路由表还是得去做判断组合。于是放弃了这个思路,索性就在beforeEach里直接判断了。

vue中路由按需加载的几种方式

使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,webpack在打包的时候会把整个路由打包成一个js文件,如果页面一多,会导致这个文件非常大,加载缓慢

vue-router 中参数传递(params,query)

query和params的区别,query相当于get请求,在页面跳转的时候,可以在地址栏看到请求参数,然而params则相当于post请求,参数不会在地址栏中显示。

Node.js的路由

当服务端接收到HTTP请求时,可以通过onRequest() 获取到url, pathname,query,及paramParams参数;为了解析这些数据需要使用url和querystring模块

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!