精华内容
下载资源
问答
  • hash值跳转- - 实现局部刷新页面

    千次阅读 2019-12-08 15:21:05
    在前端中,hash值可以利用来实现页面的局部刷新 - 他是location下的一个属性 ,hash 属性是一个可读可写的字符串,该字符串是 URL 的锚部分(从 # 号开始的部分)。 2.利用hash实现页面局部跳转 跳转原理:利用a...

    1.什么是hash?

         在前端中,hash值可以利用来实现页面的局部刷新 - 他是location下的一个属性 ,hash 属性是一个可读可写的字符串,该字符串是 URL 的锚部分(从 # 号开始的部分)。

    2.利用hash实现页面局部跳转

         跳转原理:利用a标签的href属性去寻找相应id名,实现单页面内跳转

    <!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>Document</title>
        <style>
            div {
                width: 100%;
                height: 2000px;
                background: pink;
            }
            #box1 {
                background: sandybrown;
            }
            #box2 {
                background: gold;
            }
        </style>
    </head>
    <body>
        <a href="#box1">跳转box1</a>
        <a href="#box2">跳转box2</a>
        <div></div>
        <div id="box1"></div>
        <div id="box2"></div>
    </body>
    </html>

    3.利用hash进行页面局部刷新

    利用onhashchange  监听页面hash的改变,利用jquery的load函数进行加载局部页面

    <!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>Document</title>
        <style>
            #header,
            #footer {
                width: 100%;
                height: 50px;
                background: pink;
            }
    
            #main {
                width: 100%;
                height: 420px;
                background: gold;
            }
        </style>
    </head>
    
    <body>
        <div id="header">
            <a href="#home">点击局部刷新</a>
        </div>
        <div id="main"></div>
        <div id="footer"></div>
    </body>
    
    <script src="./jquery.js"></script>
    <script>
        $(function () {
            window.onhashchange = function () {
                let hash = location.hash;
                if (hash == '#home') {
                     //局部加载的页面地址
                    $('#main').load("./home.html", function () {
                        console.log(1)
                    })
                }
            }
    
        })
    </script>
    
    </html>

    4.hash传值

    http://localhost:3000/?type=2#personal/borrow_apply

    在地址后面,#之前, 格式:?开头属性名=属性值&属性名=属性值

    #后面的都是hash值

    利用location.search可以获取到传的值

     

    展开全文
  • //子组件一定要有name <template> <div> <ul> <li @click="aaa(i)" v-for="(v, i) in nav" :key="i">{{ v }}</li> <components :is="active"></components> ...
    //子组件一定要有name值
    <template>
    	<div>
    		<ul>
    			<li @click="aaa(i)" v-for="(v, i) in nav" :key="i">{{ v }}</li>
    			<components :is="active"></components>
    		</ul>
    	</div>
    </template>
    
    <script>
    import One from './One'
    import Two from './Two'
    import Three from './Three'
    export default {
    	mounted() {
    		let str = window.location.hash
    		this.active = str.replace('#', '')
    	},
    	data() {
    		return {
    			nav: ['one', 'two', 'three'],
    			list: [One.name, Two.name, Three.name],
    			active: 'One',
    		}
    	},
    	components: {
    		One,
    		Two,
    		Three,
    	},
    	methods: {
    		aaa(i) {
    			this.active = this.list[i]
    			window.location.hash = this.list[i]
    		},
    	},
    }
    </script>

     

    展开全文
  • history和hash跳转

    2019-08-27 11:14:42
    改变路由在主机名和端口号不变的情况下,可以改变的只有路径部分(location.pathname)和hash值,改变hash值不会触发页面刷新,也不会请求后台,所以可以将其作为前端路由跳转的一种方式;常规改变location.pa...

    一、为何会有history和hash

    为了实现单页应用(SPA),让用户体验更好,所以使用前端路由进行跳转,而前端路由跳转的两种方式,就是hash和history。

    改变路由在主机名和端口号不变的情况下,可以改变的只有路径部分(location.pathname)和hash值,改变hash值不会触发页面刷新,也不会请求后台,所以可以将其作为前端路由跳转的一种方式;常规改变location.pathname会请求后台并刷新页面,比如控制台执行:location.pathname="/a",但是HTML5 新增方法history.pushState会改变location.pathname但不会请求后台,所以可将其作为前端路由跳转的第二种方式。

    二、用hash和history来实现路由

    1、hash实现原理:用 hashchange 来监听hash值的变化,然后根据hash值来进行渲染,下面看一个简单实例

    <body>
    	<a href="#/home">home</a>
    	<a href="#/about">about</a>
    	<div id="app"></div>
    	<script type="text/javascript">
    		//这里也可以用 location.hash="/home"来改变hash值
    		let app=document.getElementById("app")
    		window.addEventListener("hashchange",function(event){
    			let hash=location.hash.slice(1) || '/';
    			if(hash=="/home"){
    				app.innerHTML="我是home页面"
    			}else if(hash=="/about"){
    				app.innerHTML="我是about页面"
    			}
    		})
    	</script>
    </body>

    2、history实现原理:通过history.popState()来压入页面,造成路由变化,同时触发自写函数来实现页面变化

    <body>
    	<p onclick="pathchange('/home')">home</p>
    	<p onclick="pathchange('/about')">about</p>
    	<div id="app"></div>
    	<script type="text/javascript">
    		let app=document.getElementById("app");
    		let orginpath=location.pathname;//记录原始pathname
    		function pathchange(path){
    			let allpath=orginpath+path;//生成新的pathname
    			history.pushState(null,null,allpath);//改变pathname
    			if(path=="/home"){
    				app.innerHTML="我是home页面"
    			}else if(path=="/about"){
    				app.innerHTML="我是about页面"
    			}
    		}
    		//history.pushState和history.replaceState不会触发popstate
    		window.addEventListener('popstate', (e) => {
    			console.log(123)
    		});
    	</script>
    </body>

     

    三、history和hash的优缺点

    1、hash —— 即地址栏 URL 中的 # 符号(此 hash 不是密码学里的散列运算)
    它的特点在于:hash 虽然出现在 URL 中,但不会被包括在 HTTP 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面。    

    2、history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。
    优点:

    • pushState() 设置的新 URL 可以是与当前 URL 同源的任意 URL;而 hash 只可修改 # 后面的部分,因此只能设置与当前 URL 同文档的 URL;
    • pushState() 设置的新 URL 可以与当前 URL 一模一样,这样也会把记录添加到栈中;而 hash 设置的新值必须与原来不一样才会触发动作将记录添加到栈中;
    • pushState() 通过 stateObject 参数可以添加任意类型的数据到记录中;而 hash 只可添加短字符串;
    • pushState() 可额外设置 title 属性供后续使用。

    缺点:

    • history模式下,前端的 URL 必须和实际向后端发起请求的 URL 一致,如 http://www.abc.com/book/id。如果后端缺少对 /book/id 的路由处理,将返回 404 错误。

    四、history对象API

    1. window.history.length——返回当前会话浏览过的页面数量
    2. window.history.go( )——当前页面在会话浏览历史记录中进行移动,当参数为 0 , undefined , null , false 相当于执行window.location.reload()
    3. window.history.back()——后退一个页面
    4. window.history.forward()——无参数,前进一个页面一个页面

    ————HTML5 新增————

    1. window.history.state——该参数是只读的,与当前页面记录关联的储存对象,pushState和replaceState传的参数,前进后退一直查询的到
    2. window.history.pushState(data, title, ?url)——在会话浏览历史记录中添加一条记录。
    3. window.history.replaceState(data, title, ?url)——修改会话浏览历史的当前记录     
    • 相关参数:
    • data:一个与指定网址相关的状态对象,popstate事件触发时,该对象会传入回调函数。如果不需要这个对象,此处可以填null。
    • title:新页面的标题,但是所有浏览器目前都忽略这个值,因此这里可以填null。
    • url:新的网址,必须与当前页面处在同一个域(不然会报错)。浏览器的地址栏将显示这个网址。

    window.history.pushState({a:"132"}, "null", "/e”) 和window.history.pushState({a:"132"}, null, "https://www.baidu.com/e")效果一样

    五、location 属性

    1. location.href——完整的url    
    2. location.protocol——当前URL的协议,包括 :; 比如 https:     
    3. location.host——主机名和端口号,如果端口号是80(http)或443(https), 那就会省略端口号,比兔 www.baidu.com:8080
    4. location.hostname——主机名:比如:www.baidu.com
    5. location.port——端口号;比如8080
    6. location.pathname——url的路径部分,从 / 开始; 比如 https://www.baidu.com/s?ie=utf-8,那么 pathname = '/s'了
    7. location.search——查询参数,从?开始;比如 https://www.baidu.com/s?ie=utf-8 那么 search = '?ie=utf-8'
    8. location.hash——hash是页面中的一个片段,从 # 开始的,比如 https://www.baidu.com/#/a/b 那么返回值就是:"#/a/b"

     

     

     

     

     

     

     


     

    展开全文
  • 利用url中的hash来实现页面的跳转

    千次阅读 2017-10-15 23:24:09
    使用hash有时会看到有些网页的url上会有#这种符号,当时我没怎么在意,后来学vue的路由时候,都会看见这个#,#和#后面的字符串就是url的hash值,可以通过这个hash来进行页面的跳转。 获取url中的hash:...

    利用url中的hash来实现页面的跳转

    1. 使用hash

    有时会看到有些网页的url上会有#这种符号,当时我没怎么在意,后来学vue的路由时候,都会看见这个#,#和#后面的字符串就是url的hash值,可以通过这个hash来进行页面的跳转。
    这里写图片描述

    获取url中的hash:http://www.bbbb.com#hashstr

    window.location.hash //#hashstr

    改变hash:

    window.location.hash = "#hahah";
    // 变成http://www.bbbb.com#hahah

    最重要的是hashchange事件,通过这个事件来写页面跳转等的业务逻辑,每当url的hash改变都会触发这个事件

    window.addEventListener("hashchange", function() {
        // 获取hash值
        var hash = window.location.hash;
    
        // 根据获取的hash做相应的操作
        . . .
    });

    这里写图片描述
    这种有很多下拉列表,每个条目对应不同的静态页面,可以使用hash,每个条目设定不一样的hash值,点击条目就改变hash值,触发hashchange事件,这样就可以实现在一个页面中进行不同页面的跳转。浏览器前进后退也没问题。
    **要注意的是:这种方法浏览器直接刷新是会有问题的,页面调到最开始的页面,但是url不会改变。

    还有一种是使用HTML5 history api,这方法是比较强大的。有两个方法和一个事件

    history.pushState(stateObject, title, url)
    history.replaceState(stateObject, title, url)
    window.onpopstate事件

    两个方法:
    第1个参数是状态对象,它可以理解为一个拿来存储自定义数据的元素。它和同时作为参数的url会关联在一起。

    第2个参数是标题,是一个字符串,目前各类浏览器都会忽略它(以后才有可能启用,用作页面标题),所以设置成什么都没关系。目前建议设置为空字符串。

    第3个参数是URL地址,一般会是简单的?page=2这样的参数风格的相对路径,它会自动以当前URL为基准。需要注意的是,本参数URL需要和当前页面URL同源,否则会抛出错误。

    调用pushState()方法将新生成一条历史记录,方便用浏览器的“后退”和“前进”来导航(“后退”可是相当常用的按钮)。另外,从URL的同源策略可以看出,HTML5 history API的出发点是很明确的,就是让无跳转的单站点也可以将它的各个状态保存为浏览器的多条历史记录。当通过历史记录重新加载站点时,站点可以直接加载到对应的状态。
    history.replaceState()不会新生成历史记录,而是将当前历史记录替换掉。

    popstate事件是设计出来和前面的2个方法搭配使用的。一般只有在通过前面2个方法设置了同一站点的多条历史记录,并在其之间导航(前进或后退)时,才会触发这个事件。同时,前面2个方法所设置的状态对象(第1个参数),也会在这个时候通过事件的event.state返还回来。

    HTML history api 可以结合ajax实现翻页,我也没有写过实例,只是在学AngularJs路由的时候看到的,我是参考这个博客的

    展开全文
  • 单页面hash跳转简要记录

    千次阅读 2015-09-05 21:44:35
    由于兼容性问题,目前有三种实现的方案。这里作一下简要记录: 1. pushState html5 提供了新的 history api,可以让开发者动态修改浏览器的url,而不会引起整个页面的重绘,给用户带来更好的体验,api 定义如下:
  • location.hash 原生js页面跳转/路由

    千次阅读 2019-09-02 13:14:02
    使用vue开发项目非常方便,vue全家桶让你想实现什么功能都...当前在做的这个项目,页面跳转使用的是hash,基本原理非常简单,在主页面跳转按钮中分别加上一个属性,data,id等都可以,用来标识当前要跳转的页面,然...
  • vue-router路由的原理是通过改变网址,来实现页面的局部刷新,相比a标签跳转的不同之处在于:路由跳转不需要刷新整个页面。 大概流程可以看成: 浏览器发出请求 服务器监听到端口有请求过来,并解析url路径 根据服务器...
  • 批量修改png图片hash值

    2020-06-28 17:35:09
    使用终端工具ImageMagick 对 png 图片做轻量压缩,以达到修改hash值的目的。 首先终端使用brew安装 ImageMagick; brew install imagemagick; 然后cd到图片文件夹路径下; 最后执行以下终端...
  • react页面传参跳转Link&hashHistory

    千次阅读 2018-08-06 10:58:53
    第一种方式使用link: &lt;Link to={{ pathname: 'purchaseRecord', type: 'inputs', id: '1'}} &gt;&lt;a onClick={()=&...获取传过来的:this.props.location.type/id 第...
  • 如果修改hash值的位置,会导致后面的gzip压缩无效,所以,建议不要修改hash值的位置。 默认,打包的时候,js和css文件名会带上一串随机数,每次打包,随机数都不同,导致上线部署的时候,需要先删除旧的文件,再解压...
  • html5之页面跳转-hash

    千次阅读 2017-11-02 21:45:18
    <!DOCTYPE html> < ... lang = "en" ...//当前进和后退的箭头出现后,页面也会跟随跳转 ...触发历史管理页面:1.通过跳转页面 2.hash值 3.pushState ...onhashchange:改变hash值来管理,使页面跳转 -->
  • 页面内跳转到指定div的几种方法(锚点、hash、animate、scrollIntoView) 由于最近有回到顶部、根据nav定位到指定div和定位到输入错误的输入框的需求,所以在此分析此类需求可能的解决方案 用a标签的href属性 ...
  • 首先在做一个当前页面的操作时(如上面的打开弹框),执行上面的方法,这样当前路由就会添加一个对应的hash值(上面“full”可以自定义),而页面并没有刷新,路由栈却加了一个 然后当我们返回时就可以根据这...
  • location.hash = "#filter_moreClue"; 转载于:https://www.cnblogs.com/cag2050/p/5657473.html
  • 如果是则获取hash属性 Base64.decode 一下使用框架的路由定向到对应的页面去,从而实现纯前端的方式分享完整页面链接。 三、不同页面重定义分享接口 最后补充一点,要想实现分享所有页面的完整路径,需要在...
  • Hash地址的定位,页面改变某一选项区中的内容后,其他内容同步刷新,内容选项定位在指定的区域; html: <div class="layui-tab layui-flex" lay-filter="test"> <ul class="layui-tab-title"> <...
  • jch-rs-为Rust跳转一致的哈希 跳转一致性哈希是一种线性复杂性算法,在 例子 use jch; let key = 5u64 ; let num_buckets = 1024i32 ; println! ( "{}" , jch :: hash (key, num_buckets));
  • 主要是通过js操作window.location.hash(可读写),加载完页面对hash进行一下判断,然后执行相应的js指令改变页面状态。 最常用的就是一个网页有多个tab,是通过js来控制相应tab的隐藏与显示,如果不加以处理的话无法...
  •    在开发在线考试系统中,需要实现用户点击右边...而location.hash则可以用来获取或设置页面的标签。比如http://domain/#admin的location.hash="#admin"。利用这个属性可以做一个非常有意义的事情。
  • 在近期做的一个小项目中,本地路由跳转没有任何问题,使用nginx部署上线后出现很多路由无法跳转问题。经过一番研究,发现可以通过以下两种方式解决。 法一.将路由改为hash模式 vue-router 默认 hash 模式 —— ...
  • 去除vue路由跳转地址栏后的哈希#

    千次阅读 2017-11-02 17:35:34
    去除vue路由跳转地址栏后的哈希#,我们只需要在路由跳转的管理文件router目录下的index.js中加上一句代码即可去掉哈希# import Vue from 'vue' //1.引入vue-router import Router from 'vue-router' ...
  • 浅谈移动端页面无刷新跳转问题的解决方案2017-12-22 祈澈姑娘最近开发微信公众号,用的框架是 一般的 UI,但是涉及到多页面之间的相互跳转的问题,降低了浏览器的性能,用户体验特别不好,卡顿,不流畅,因此不采用...
  • 本文介绍了JS如何实现在页面上快速定位(锚点跳转问题),分享给大家,具体如下:1. 锚点跳转简介锚点其实就是可以让页面定位到某个位置上的点。在高度较高的页面中经常见到。锚点跳转有两种形式:a标签 + name / ...
  • 这个原因的本质是 history 和 hash 的区别 ... 直观上的区别是: hash模式下,在浏览器地址栏里面会有: ...hash模式下,上线之后不会出现问题。 history 模式下,会出现一个致命的BUG,在服务器上面上线之
  • 传递的参数是字符串/布尔/数字等基本数据类型;对象或数组无法传递; 通过https://react-guide.github.io/react-router-cn/docs/API.html的API文档,可知,进入跳转的页面,可以通过{this.props.params.(传递的...
  • Hash冲突

    万次阅读 2018-03-28 15:20:34
    这种转换是一种压缩映射,散列的空间通常远小于输入的空间,不同的输入可能会散列成相同的输出,所以不可能从散列来唯一的确定输入,由此引出hash冲突。 简单的说就是一种将任意长度的消
  • 前端页面跳转session丢失问题

    万次阅读 2017-04-14 17:20:04
    最近自己在搞后端采用分布式多台服务器部署,然后前后端分离的开发方式,页面在使用window.location.href 跳转方式或者其它前端的跳转方式的时候,再向后端应用服务器请求Cookie sessionid总是获取不到,这个怎么办...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 40,433
精华内容 16,173
关键字:

hash值跳转问题