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刷新当前页面的更多相关文章

  1. Vue. 之 刷新当前页面,重载页面数据

    Vue. 之 刷新当前页面,重载页面数据 如下截图,点击左侧不同的数据,右侧根据左侧的KEY动态加载数据.由于右侧是同一个页面,在进行路由跳转后,不会再次刷新数据. 解决方案: 右侧的页面中 scri ...

  2. vue案例 - vuex+sessionstorage解决vue项目刷新后页面空白/数据丢失

    第一部分 SessionStorage 首先查看sessionStorage的地方在控制台的 Application > Storage > Session Storage这里: 根据se ...

  3. vue项目刷新当前页面

    场景: 有时候我们在vue项目页面做了一些操作,需要刷新一下页面. 解决的办法及遇到的问题: this.$router.go(0).这种方法虽然代码很少,只有一行,但是体验很差.页面会一瞬间的白屏,体 ...

  4. (转)vue项目刷新当前页面

    场景: 有时候我们在vue项目页面做了一些操作,需要刷新一下页面. 解决的办法及遇到的问题: this.$router.go(0).这种方法虽然代码很少,只有一行,但是体验很差.页面会一瞬间的白屏,体 ...

  5. js 刷新父页面

    //刷新父页面 window.opener.location.reload();

  6. vue.js在html页面中的使用

    1.加载vue.js,然后 var app = new Vue({ //vue代码})2.截图如下:

  7. Vue.js如何在一个页面调用另一个同级页面的方法

    使用场景: 页面分为header.home.footer三部分,需要在home中调用header中的方法,这两个没有相互引入 官方给出方法: 需要在展示页里调用顶部导航栏页里的方法,两者之间没有引用关 ...

  8. js 刷新当前页面会弹出提示框怎样将这个提示框去掉

    //禁止刷新提示window.onbeforeunload = function() { var n = window.event.screenX - window.screenLeft; var b ...

  9. js刷新当前页面

    a href="javascript:window.location.href=location.href"

随机推荐

  1. 使用zTree插件构建树形菜单

    zTree下载:https://github.com/zTree/zTree_v3 目录: 就我看来,zTree较为实用的有以下几点: zTree 是一个依靠 jQuery 实现的多功能 “树插件”. ...

  2. 通过Spring使用远程访问和web服务

    http://docs.huihoo.com/spring/zh-cn/remoting.html     Spring2 提供的remote包学习笔记

  3. ImageLoader使用

    最近琢磨的网上的这些开源框架,imageLoader确实很好用,基本用法不记录了,参考网上的一些代码写了个ImageLoaderManager /** * Created by Lee on 2016 ...

  4. MySQL Memory 存储引擎浅析

    原创文章,转载必需注明出处:http://www.cnblogs.com/wu-jian/ 前言 需求源自项目中的MemCache需求,開始想用MemCached(官方网站:http://memcac ...

  5. MySQL修改参数不重启生效

    地球人都知道,更新mysql配置my.cnf需要重启mysql才能生效,但是有些时候mysql在线上,不一定允许你重启,这时候应该怎么办呢? 看一个例子:mysql> show variable ...

  6. windows下使用python2.7.6 安装django

    1) 安装python2.7.6 2) 由于 python2.7.6 中没有安装setuptools,需要先从官网下载setuptools,下载zip包然后解压,运行 python setup.py ...

  7. awk 截取字符串

    1.把字符串的变量存入到其他变量中 1.1.编辑 shell 文件 [root@m910-120 test]# vi awkTest.sh ips=10.0.204.217:10.0.204.218 ...

  8. Response设置response header

    total : #常见状态码:服务器处理请求的结果状态 200 : 表示请求处理完成并完美返回; 302 : 表示请求需要进一步细化; 404 : 表示客户访问资源Not Found; 500 : 表 ...

  9. form表单提交方式

    form表单提交方式总结一下: 一.利用submit按钮实现提交,当点击submit按钮时,触发onclick事件,由JavaScript里函数判断输入内容是否为空,如果为空,返回false, 不提交 ...

  10. Vmware私有云虚拟机(CentOS 6.5 OS)之根分区扩容

    注:适用于未使用lvm管理的分区,目前仅在CentOS 6.5 上操作,其他系统尚未测试,请谨慎操作 一.查看当前分区状况 [root@disk-test ~]# df -h Filesystem   ...