因为项目需要实现更改路由,但是为了确保页面动画不受影响,所以要保证页面不能够刷新!
<!--点击登录按钮更改url-->
<script type="text/javascript">
function LoginChangeUrl(){
<!--获取当前url-->
var url=window.location.href
<!--判断当前url末尾字符是否为“/”-->
if(url.charAt(url.length-1)=="/"){
<!--pushState三个参数,state,title,url-->
history.pushState("", "Title", url+"login");
}
}
</script>
charAt() 方法可返回指定位置的字符。
pushstate中的三个参数分别为(state,title,url)
-
状态对象 — 状态对象state是一个JavaScript对象,通过pushState () 创建新的历史记录条目。无论什么时候用户导航到新的状态,popstate事件就会被触发,且该事件的state属性包含该历史记录条目状态对象的副本。
状态对象可以是能被序列化的任何东西。原因在于Firefox将状态对象保存在用户的磁盘上,以便在用户重启浏览器时使用,我们规定了状态对象在序列化表示后有640k的大小限制。如果你给
pushState()
方法传了一个序列化后大于640k的状态对象,该方法会抛出异常。如果你需要更大的空间,建议使用sessionStorage
以及localStorage
. -
标题 — Firefox 目前忽略这个参数,但未来可能会用到。在此处传一个空字符串应该可以安全的防范未来这个方法的更改。或者,你可以为跳转的state传递一个短标题。
- URL — 该参数定义了新的历史URL记录。注意,调用
pushState()
后浏览器并不会立即加载这个URL,但可能会在稍后某些情况下加载这个URL,比如在用户重新打开浏览器时。新URL不必须为绝对路径。如果新URL是相对路径,那么它将被作为相对于当前URL处理。新URL必须与当前URL同源,否则pushState()
会抛出一个异常。该参数是可选的,缺省为当前URL。
修改了url后点击关闭按钮再次修改url
<!--点击关闭按钮更改login的url-->
<script type="text/javascript">
function CloseChangeLoginUrl(){
var url=window.location.href
if(url.charAt(url.length-1)=="n"){
history.pushState("", "Title", url.replace('login',''));
}
}
</script>
实现效果:
更改路由: