页面刷新和vue页面刷新

history.go(0)
location.reload()
location=location
location.assign(location)
document.execCommand('Refresh')
window.navigate(location)
location.replace(location)
document.URL=location.href

这几个都可以刷新:
window.location.reload();刷新
window.location.href=window.location.href;刷新
window.close();关闭窗口,不弹出系统提示,直接关闭 
window.close()相当于self属性是当前窗口
window.parent.close()是parent属性是当前窗口或框架的框架组

 

页面实现跳转的九种方法实例:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>navigate</title>
<script language="javascript">
    setTimeout('window.navigate("top.html");',2000);
    setTimeout('window.document.location.href="top.html";',2000);
    setTimeout('window.document.location="top.html";',2000);
    setTimeout('window.location.href="top.html";',2000);
    setTimeout('window.location="top.html";',2000);
    setTimeout('document.location.href="top.html";',2000);              
    setTimeout('document.location="top.html";',2000);
    setTimeout('location.href="top.html";',2000);
    setTimeout('location.replace("top.html")',2000);
//只要使用location方法,和任意的window对象,location对象,href属性连用,都可以页面的跳转
</script>
</head>

<body>
页面将在2秒后跳转
</body>
</html>


解释:
location是个对象,比如本页的document.location和window.location的属性有    
  location.hostname   =   community.csdn.net 
  location.href   =   http://community.csdn.net/Expert/topic/4033/4033372.xml?temp=2.695864E-02 
  location.host   =   community.csdn.net 
  location.hash   =   
  location.port   =   
  location.pathname   =   /Expert/topic/4033/4033372.xml 
  location.search   =   ?temp=2.695864E-02 
  location.protocol   =   http: 

  可见href是location的属性,类别是string。

 

vue页面刷新:

我 用了一次 

location.reload()//刷新

1.

location.reload()

router.go(0)

这个router是定义的vue-router,例如:

const router = new Router({})

把这个export导出,在需要的组件里import引用

 

 

2.

// replace another route (with different component or a dead route) at first

// 先进入一个空路由

vm.$router.replace({

path: '/_empty',})

//then replace your route (with same component)

vm.$router.replace({

path: '/student/report',

query: {

'paperId':paperId

}

})

 

3.

this.$router.push({
path:this.$route.fullPath, // 获取当前连接,重新跳转
query:{
_time:new Date().getTime()/1000 // 时间戳,刷新当前router
}
})

----------- -------------------补充 -------------------------

上面这个方法只能满足部分需求,使用 this.$router.replace('/refresh'),更简洁,其中refresh.vue文件属于中转文件,在该文件的beforeRouteEnter钩子里,代码如下beforeRouteEnter(to, from, next) {
next(vm => {
vm.$router.replace(from.path)
})
}

这样,你每次想刷新整个路由,可以调取this.$router.replace('/refresh')。

4.

看了很多方法,可能需求不一样,没能解我的问题,有的是整个页面刷新,有的是用$root,但我的this.$root不是App.vue下,因此回去看了一下官方文档.

因此,我这边想了想解决办法就是先push一个新的页面,在返回上一个页面即可.

代码如下所示:

    let NewPage = '_empty' + '?time=' + new Date().getTime()/1000
    // 之后将页面push进去
    this.$router.push(NewPage)
    // 再次返回上一页即可
    this.$router.go(-1)

 

window.location.href window.location.replace() window.location.reload()三者的区别

总是在资料上看到 window.location.href和window.location.replace的区别,但是不是很明白,今天彻底明白了。简单说说:

有3个jsp页面(1.jsp, 2.jsp, 3.jsp),进系统默认的是1.jsp ,当我进入2.jsp的时候, 2.jsp里面用window.location.replace("3.jsp");与用window.location.href("3.jsp");从用户界面来看是没有什么区别的,但是当3.jsp页面有一个“返回”按钮,调用window.history.Go(-1);wondow.history.back();方法的时候,一点这个返回按钮就要返回2.jsp页面的话,区别就出来了,当用window.location.replace("3.jsp");连到3.jsp页面的话,3.jsp页面中的调用window.history.go(-1);wondow.history.back();方法是不好用的,会返回到1.jsp 。当用window.location.href("3.jsp");连到3.jsp页面的话,3.jsp页面中的调用window.history.go(-1);wondow.history.back();方法是好用的,会返回2.jsp。因为window.location.replace("3.jsp");是不向服务器发送请求的跳转,而window.history.go(-1);wondow.history.back();方法是根据服务器记录的请求决定该跳到哪个页面的,所以会跳到系统默认页面1.jsp 。window.location.href("3.jsp");是向服务器发送请求的跳转,window.history.go(-1);wondow.history.back();方法是根据服务器记录的请求决定该跳到哪个页面的,所以就可以返回到2.jsp。

  1. window.location.href=“url”:改变url地址;
  2. window.location.replace(“url”):将地址替换成新url,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,你不能通过“前进”和“后 退”来访问已经被替换的URL,这个特点对于做一些过渡页面非常有用!
  3. window.location.reload():强制刷新页面,从服务器重新请求!

 

  • 3
    点赞
  • 0
    评论
  • 8
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值