精华内容
下载资源
问答
  • 哈希路由和历史路由

    2021-01-12 22:24:31
    路由分两种: hash模式: url后面的有一个#,#后面的字符串,叫hash值,也叫锚点。 1)hash 值变化不会导致浏览器向服务器发出请求 2)hash 改变会触发 hashchange 事件 当hash值变化了,就会触发事件 3)在 ...

    路由分两种:

    hash模式:

    url后面的有一个#,#后面的字符串,叫hash值,也叫锚点。
        1)hash 值变化不会导致浏览器向服务器发出请求
        2)hash 改变会触发 hashchange 事件 当hash值变化了,就会触发事件
        3)在 html5 的 history 出现前,基本都是使用 hash 来实现前端路由的
        4)由于hash路由,有个#,有人说比较丑
        5)hash值变化,也会引起,浏览器的前进和后退
        6)相对于history来说,hash的兼容性更好一点
        7)hash本来是拿来做页面定位的,如果拿来做路由的话,原来的锚点功能就不能用了
    
    发起hash的方法:
        window.location.hash = "position"
    

    history模式:

     hash 的传参是基于 url 的,如果要传递复杂的数据,会有体积的限制,而 history 模式不仅可以在url里放参数,还可以将数据存放在一个特定的对象中。
        1)history传参比hash传参再有优势
        2)使用http协议
        3)history模式,会向后端发起请求,所以说,需要后端配合,不然可能会出现404
    

    发起 history的方法:

    history.pushState({ id }, null, id),里面有很多种方法
    

    hash路由和history路由的区别
    1.hash路由在地址栏URL上有#,而history路由没有会好看一点
    2.我们进行回车刷新操作,hash路由会加载到地址栏对应的页面,而history路由一般就404报错了(刷新是网络请求,没有后端准备时会报错)。
    3.hash路由支持低版本的浏览器,而history路由是HTML5新增的API。
    4.hash的特点在于它虽然出现在了URL中,但是不包括在http请求中,所以对于后端是没有一点影响的,所以改变hash不会重新加载页面,所以这也是单页面应用的必备。
    5.history运用了浏览器的历史记录栈,之前有back,forward,go方法,之后在HTML5中新增了pushState()和replaceState()方法(需要特定浏览器的支持),它们提供了对历史记录进行修改的功能,不过在进行修改时,虽然改变了当前的URL,但是浏览器不会马上向后端发送请求。

    展开全文
  • hash路由(哈希路由)

    2019-12-12 09:57:36
    1、https://www.cnblogs.com/huanying2015/p/8047376.html (js 哈希路由原理实现) 2、https://www.cnblogs.com/yeer/archive/2013/01/21/2869827.html (location.hash详解)
    展开全文
  • js 哈希路由原理实现

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

    在 js 中,有一种方法,可以在不刷新页面的情况下,页面的内容进行变更,ajax 是一种,这里介绍另一种,就是 哈希路由原理

    先看一个简单的路由和页面内容关联的例子,要实现两个功能:

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

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

    实现过程:

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

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

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

    代码:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Document</title>
     6     <script>
     7         window.onload = function(){ 
     8             var  getoneNum = function(start,end){
     9                 var rand_num = Math.random();
    10                 var range = end - start ;
    11                 return start + Math.round( (Math.random() * range) );
    12             };
    13             var getnums = function(start,end,n){
    14                 var arr = [];
    15                 for(var i=0;i<n;i++){
    16                     arr.push( getoneNum(start,end) );
    17                 };
    18                 return arr ;
    19             };
    20             function Ohash(){
    21                 this.ospan = document.querySelector('.ospan');
    22                 this.obtn = document.querySelector('input');
    23             };
    24             Ohash.prototype.bind = function(){
    25                 var that = this;
    26                 this.obtn.onclick = function(){
    27                       location.hash = getnums(3,108,6);
    28                       that.ospan.innerHTML = location.hash.substring(1) ;
    29                 };
    30                 window.onhashchange = function(){
    31                     that.ospan.innerHTML = location.hash.substring(1)||'' ;
    32                 };
    33             };
    34             var Oha = new Ohash();
    35             Oha.bind();
    36         }
    37     </script>
    38 </head>
    39 <body>
    40     <div class='box'> 
    41        <input type="submit" value="触发按钮">
    42        <span class="ospan"></span>
    43     </div>
    44 </body>
    45 </html>

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

     

     

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

    2.1 构造一个路由函数

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

    2.3 定义路由配置规则

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

    html 代码:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Document</title>
     6     <link rel="stylesheet" href="./css/router.css">
     7     <script src="./js/router.js"></script>
     8     <style>
     9    
    10     </style>
    11 
    12 </head>
    13 <body>
    14     <header>这里是头部</header>
    15     <nav>
    16         <li><a href="#/">aluoa</a>  </li>
    17         <li><a href="#/01">huanying2015</a> </li>
    18         <li> <a href="#/02">一代天骄</a> </li>
    19         <li> <a href="#/03">霸王</a> </li>
    20         <li><a href="#/04">秦始皇</a> </li>
    21         <li><a href="#/05">释迦摩尼</a> </li>
    22     </nav>
    23     <section>
    24         如果想看路由改变效果,请点击左边的链接
    25     </section>
    26     <div class="clear"></div>
    27     <footer>这里是尾部</footer>
    28 </body>
    29 </html>
    View Code

    css 代码:

     1  header,footer{
     2         height:5em;
     3         background: #cba;
     4         text-align: center;
     5         line-height: 5em;
     6     }
     7     nav{
     8         width:20%;
     9         height:30em;
    10         background: #391;
    11         float:left;
    12     }
    13     li{
    14         height:2em;
    15     }
    16 
    17     section{
    18         width:80%;
    19         background: #9a1;
    20         height:30em;
    21         float:right;
    22         line-height: 2em;
    23         text-align: center;
    24     }
    25     .clear{
    26         clear:both;
    27     }
    View Code

    js代码:

     1 window.onload = function(){
     2     (function(){
     3         var Router=function(){
     4             this.routes={};
     5             this.curUrl='/';
     6         };
     7          // 对路由的hash值进行监听,如果发生改变,则调用reloadPage()函数
     8         Router.prototype.init= function(){
     9             // 这里的两个this 是不一样的,需要注意
    10             window.addEventListener('hashchange',this.reloadPage.bind(this) );
    11         };
    12         // 调用reloadPage函数,实际上时执行routes[]()函数
    13         Router.prototype.reloadPage = function(){
    14             this.curUrl = location.hash.substring(1)||'/';
    15             this.routes[this.curUrl]();
    16         };
    17           // 路由配置的规则
    18         Router.prototype.map = function(key,callback){
    19             this.routes[key] = callback;
    20         }
    21         window.Router = Router;
    22         })();
    23 
    24         var ORouter = new Router();
    25         ORouter.init();
    26 
    27         // 以下为路由配置的设置,形象的当做一个路由与调用函数的映射表也可以
    28         ORouter.map('/',function(){
    29             var Osect = document.querySelector('section');
    30             Osect.innerHTML = "欢迎来到火星,这是一次非常的旅行,祝您路途愉快!";
    31         });
    32          ORouter.map('/01',function(){
    33             var Osect = document.querySelector('section');
    34             Osect.innerHTML = "huanying2015 huanying2015 huanying2015 huanying2015 huanying2015 huanying2015 huanying2015 huanying2015 huanying2015 huanying2015 huanying2015 huanying2015 huanying2015 ";
    35         });
    36          ORouter.map('/02',function(){
    37             var Osect = document.querySelector('section');
    38             Osect.innerHTML = "hehehehehheeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeheheehehehhehehehhehehehehheeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeheheehehehhehehehhehehehehheeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeheheehehehheheheh";
    39         });
    40          ORouter.map('/03',function(){
    41             var Osect = document.querySelector('section');
    42             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  ";
    43         });
    44          ORouter.map('/04',function(){
    45             var Osect = document.querySelector('section');
    46             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 ";
    47         });
    48         ORouter.map('/05',function(){
    49             var Osect = document.querySelector('section');
    50             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  ";
    51         });
    52 }

    运行结果:

    转载于:https://www.cnblogs.com/huanying2015/p/8047376.html

    展开全文
  • 通常情况下我们使用 ...但是对于包含了哈希路由的网址,使用parse方法会得到意想不到的结果 如下源码为例 String requesturl = "https://my.vivo.com.cn/#/home?sign=12345678"; System.out.println("...

    通常情况下我们使用

    Uri uri = Uri.parse(requesturl);

    来对一个链接进行解析,通过解析后得到的uri,可以得到链接各个部分的数据

    但是对于包含了哈希路由的网址,使用parse方法会得到意想不到的结果

    如下源码为例

                    String requesturl = "https://my.vivo.com.cn/#/home?sign=12345678";
                    System.out.println("requesturl:" + requesturl);
                    Uri uri = Uri.parse(requesturl);
                    System.out.println("getQueryParameter:" + uri.getQueryParameter("sign"));
                    System.out.println("getHost:" + uri.getHost());
                    System.out.println("getScheme:" + uri.getScheme());
                    System.out.println("getPath:" + uri.getPath());

    代码运行后打印的结果是

    I/System.out: requesturl:https://my.vivo.com.cn/#/home?sign=12345678
    I/System.out: getQueryParameter:null
    I/System.out: getHost:my.vivo.com.cn
    I/System.out: getScheme:https
    I/System.out: getPath:/
    

    可以看出来路径,参数得到的都是错误值

    针对这种情况,需要对链接先进行一次encode,注意encode时使用了『/:?&=』来做为参数

    requesturl = Uri.encode(requesturl, "/:?&=");

    将链接中的#转义后再进行parse

    如下源码为例

                    String requesturl = "https://my.vivo.com.cn/#/home?sign=12345678";
                    requesturl = Uri.encode(requesturl, "/:?&=");
                    System.out.println("requesturl:" + requesturl);
                    Uri uri = Uri.parse(requesturl);
                    System.out.println("getQueryParameter:" + uri.getQueryParameter("sign"));
                    System.out.println("getHost:" + uri.getHost());
                    System.out.println("getScheme:" + uri.getScheme());
                    System.out.println("getPath:" + uri.getPath());

    代码运行后

    I/System.out: requesturl:https://my.vivo.com.cn/%23/home?sign=12345678
    I/System.out: getQueryParameter:12345678
    I/System.out: getHost:my.vivo.com.cn
    I/System.out: getScheme:https
    I/System.out: getPath:/#/home

    可以得到正常结果了

    展开全文
  • 支持历史记录和哈希路由的轻型独立客户端路由器。 文献资料 请参阅。 榕属 寻找一组轻量级功能来使用Web组件开发应用程序吗? 创建快速,轻量级Web组件的功能 用于为应用程序状态创建快速,轻量级存储的功能 创建...
  • 一个爱好项目,可以通过具有内置哈希路由功能的数据驱动方法来动态呈现html。 示例项目 从查看源代码 从查看项目 如何包含在项目中 在html文件顶部下载并引用此URL ...
  • 好好学习 ,天天向上。Are you ready? 代码奉上!!!!!!!... let hashUrl = window.location.hash let url = hashUrl.substring(hashUrl.indexOf('?... let arr = (url).replace(/^\#/, '').split('&...
  • ui路由器 在OpenFin中测试哈希路由
  • react的url-query部分转换(哈希路由模式) 最近遇到一个需求,在开发react+antd表格的情况下,需要将表格查询参数保存在url里面,但是因为路由时哈希模式,所以,需要封装一个转换函数。直接上代码: const url = ...
  • 小路线 该模块仅用于学习目的。 没有例外或其他功能,仅保留了基本的哈希路由。 我考虑的唯一浏览器是Chrome。
  • Vue 路由哈希模式下的锚点定位支持

    千次阅读 2020-05-12 13:34:17
    路由 hash 模式已经将#占用, 页面的锚点功能失效,js 实现替代 <a @click="$tools.goAnchor(0)">定位到顶部</a> <a @click="$tools.goAnchor('#link1')">定位到锚点1</a> <a @click=...
  • *方案2:哈希(hash)路由原理 *方案2讲解:监听浏览器的url中的hash(url的#后面的文本——锚文本)值,进行更改内容 --&gt; &lt;!DOCTYPE html&gt; &lt;html lang="cn"&gt; &lt...
  • vue的路由在默认的hash模式下,默认打包一般不会有什么问题,不过hash模式由于url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式也会有一些应用场景.新手往往会碰到history模式打包后页面...
  • 对于spa应用,前端路由必不可少,它代表着页面的切换跳转展示。目前浏览器支持的前端路由有hash模式和history模式 前端路由的出现各有优缺点,优点是前后端分离了减少了服务器压力、页面流畅,缺点也明显初次加载慢...
  • hash路由和history路由

    2021-01-12 20:59:16
    路由分两种: hash模式: url后面的有一个#,#后面的字符串,叫hash值,也叫锚点。 1)hash 值变化不会导致浏览器向服务器发出请求 2)hash 改变会触发 hashchange 事件 当hash值变化了,就会触发事件 3)在 ...
  • Vue路由跳转原理(哈希模式)

    千次阅读 2019-10-12 05:56:55
    哈希模式(利用`hashchange` 事件监听 url的hash 的改变) ``` window.addEventListener('hashchange', function(e) { console.log(e) }) ``` 核心是锚点值的改变,我们监听到锚点值改变了就去局部改变页面...
  • 提出一种面向智能路由控制的多级哈希网络数据存储结构,高效利用交换机有限的存储空间,实现低碰撞率的网络数据存储。该结构通过多级哈希表增加数据的可存储空间数量,从而降低存储冲突率并提高存储空间利用率。同时...
  • hash路由VSbrowser路由

    2020-06-10 18:37:49
    hash路由 长什么样?... 实现原理: hash值的变化会触发浏览器的...而哈希路由是监听这个哈希路由改变的事件,渲染相对应的页面元素。 那么问题来了,2者是同时起效还是有一个不起作用还是根本就冲突? 查看has..
  • 路由动态传参 如何拿到id呢 在这里插入图片描述 第二种传参 或通过props 路由懒加载 hash模式 history模式 也就是吧mode改成mode:“history” 路由守卫 全局路由守卫 beforeEach afterEach 前置路由守卫...
  • 哈希路由和历史路由 来自大佬的解读 我在使用react-router-dom时,发现BrowserRouter是无法通过url去定位路由的。会直接去请求服务端,当然返回是404Error。 其实HashRouter和BrowserRouter差不多,看个人需求,...
  • 前端如何实现hash路由

    千次阅读 2019-03-14 11:36:13
    路由发展 以前的路由都是由后端实现的,根据url来重新载入页面。但是近年来前端页面变得越来越复杂导致服务器端压力越来越大。自然出现了解决方案,通过url的改变,在不刷新页面的情况下,修改页面内容,这就是本文...
  • hash路由和history路由的区别: 1.hash路由在地址栏URL上有#,而history路由没有会好看一点 hash路由 121.0.0.1:80/test/index.html#/a/b history路由 121.0.0.1:80/a/b 2.进行回车刷新操作,hash路由会加载到地址...
  • hash路由详解

    2021-06-30 18:13:38
    cb函数是从History.listen(cb)时候传入的,这个对路由的监听函数是对app实例的遍历,给每一项添加_route属性,但是我们知道vue是渐进式的,vue本身不具有关于路由的属性,所以路由的引入是使用的插件,也就是执行...
  • 路由的基本实现——hash路由

    千次阅读 2018-05-29 12:12:25
    vue、react在路由的实现上,都有基于hash的路由。那么如何使用原生来实现呢? 比如类似下面这样的路由: hashchange事件是实现路由的核心 hash实现路由的时候,最本质的原理就是hash值的变化,会引发一个...
  • 1.为什么要有前端路由: 对于 Vue 这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义。前端路由的核心,就在于 —— 改变视图的同时不会向后端发出请求。...
  • Vue hash 路由和 history 路由的区别

    千次阅读 2019-05-23 20:58:47
    这样一来,尽管浏览器没有请求服务器,但是页面状态和url一一关联起来,后来人们给它起了一个霸气的名字叫前端路由,成为了单页应用标配。 history路由 history api可以分为两大部分,切换和修改 切换历史状态 ...
  • 1.路由的概念 路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源。 那么url地址和真实的资源之间就有一种对应的关系,就是路由路由分为前端...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 30,344
精华内容 12,137
关键字:

哈希路由