页面刷新和vue页面刷新

article/2025/10/8 15:23:13

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()//刷新

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

}

})

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。

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