Vue.js刷新当前页面
Vue.js的路由跳转很强大,类似ajax的局部刷新,路由跳转时候页面是不刷新的,刷新当前页面的功能不建议用,但是有的时候确实需要刷新当前页面来实现某些需求,这个时候,我们有三 种方法可以实现。
第一种就是传统的的方法
window.location.reload();
第二种是通过vue.js的路由来实现
this.$router.go(0)
<template>
<section>
<h1 ref="hello">{{ value }}</h1>
<el-button type="danger" @click="get">点击</el-button>
</section>
</template>
<script>
export default {
data() {
return {
value: 'Hello World ~'
};
},
methods: {
get() {
this.$router.go(0);
// window.location.reload();
}
},
mounted() {
},
created() {
}
}
</script>
第三种是使用浏览器自带的刷新功能,window.history.go(0),这里的window可以省略不写
history.go(0);
<template>
<section class="p-10">
<el-button type="danger" @click="back">返回</el-button>
</section>
</template>
<script>
export default {
data() {
return {
};
},
methods: {
back() {
history.go(0);
}
}
};
</script>
既然使用vue来做前端了,那么这里就推荐使用第二种方式吧~
嗯,就酱~~
Vue.js刷新当前页面的更多相关文章
- Vue. 之 刷新当前页面,重载页面数据
Vue. 之 刷新当前页面,重载页面数据 如下截图,点击左侧不同的数据,右侧根据左侧的KEY动态加载数据.由于右侧是同一个页面,在进行路由跳转后,不会再次刷新数据. 解决方案: 右侧的页面中 scri ...
- vue案例 - vuex+sessionstorage解决vue项目刷新后页面空白/数据丢失
第一部分 SessionStorage 首先查看sessionStorage的地方在控制台的 Application > Storage > Session Storage这里: 根据se ...
- vue项目刷新当前页面
场景: 有时候我们在vue项目页面做了一些操作,需要刷新一下页面. 解决的办法及遇到的问题: this.$router.go(0).这种方法虽然代码很少,只有一行,但是体验很差.页面会一瞬间的白屏,体 ...
- (转)vue项目刷新当前页面
场景: 有时候我们在vue项目页面做了一些操作,需要刷新一下页面. 解决的办法及遇到的问题: this.$router.go(0).这种方法虽然代码很少,只有一行,但是体验很差.页面会一瞬间的白屏,体 ...
- js 刷新父页面
//刷新父页面 window.opener.location.reload();
- vue.js在html页面中的使用
1.加载vue.js,然后 var app = new Vue({ //vue代码})2.截图如下:
- Vue.js如何在一个页面调用另一个同级页面的方法
使用场景: 页面分为header.home.footer三部分,需要在home中调用header中的方法,这两个没有相互引入 官方给出方法: 需要在展示页里调用顶部导航栏页里的方法,两者之间没有引用关 ...
- js 刷新当前页面会弹出提示框怎样将这个提示框去掉
//禁止刷新提示window.onbeforeunload = function() { var n = window.event.screenX - window.screenLeft; var b ...
- js刷新当前页面
a href="javascript:window.location.href=location.href"
随机推荐
- Python中json.loads解析包含\n的字符串会出错
用python中的json.loads解析字符串,失败了. [解决过程] 1.调试了半天,终于发现,如果把其中的: "呵呵加那么多连接啊\n\n这个标准还是不错的\n\n给大家推荐一个更多的 ...
- Coolite简介
Coolite Toolkit 简介 Coolite Toolkit 是一个支持ASP.NET AJAX的Web控件 Coolite Toolkit是基于跨浏览器的ExtJS 库开发而来的,并且简化了 ...
- c#中从string数组转换到int数组及比较两个字符串相等
string[] input = { "1", "2", "3", "4", "5", " ...
- 利用Python对文件进行批量重命名——以图片文件为例
效果如下:0001号用户的第 i 张图片 代码: import os class ImageRename(): def __init__(self): self.path = 'C:/Users/lb ...
- jquery的param()
jQuery ajax - param() 方法 jQuery Ajax 参考手册 实例 序列化一个 key/value 对象: var params = { width:1900, height:1 ...
- windows system.exe占用文件
1)问题的原因是出于一个服务Application Experience,如果装好系统后就把此服务设为手动启动了,平时运行也没什么异常.但是win7在运行exe时如果没有这个服务的辅助就会长时间的占用 ...
- 运行cotroller后,查看vuser日志为空
查看C:\Users\***\AppData\Local\Temp\res\log下,文件夹空,处理如下 run-time-setting中,选中always send message
- Ecshop提示Only variables should be passed by reference in错误
Ecshop是个坑爹货,为什么tiandi会说它是个坑爹货呢,请看一下下面的官方的运行环境推荐: 服务器端运行环境推荐·php版本5.0以上5.3以下的版本(推荐使用5.2系列版本)·Mysql版本5 ...
- Spring Boot MongoDB JPA 简化开发
使用SpringBoot提供的@Repository接口,可以完成曾经需要大量代码编写和配置文件定制工作.这些以前让新手程序员头疼,让有经验的程序员引以为傲的配置,由于框架的不断完善,变得不那么重要, ...
- [前端开发] 未来趋势“无后端”的web应用开发模式
最近看到前端趋势2013大会上的一篇文章,题目是<各位快看,不用后端>,觉得有点意思,恰好近期的一次讨论及半年前的一次开发实践也涉及到这种模式,简单谈谈我的想法. 不得不说,文章的题目确实 ...