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. python中的多进程处理

    转载于:http://blog.csdn.net/jj_liuxin/article/details/3564365 帮助文档见https://docs.python.org/2.7/library/ ...

  2. 初学spring(一)

    1.spring 在ssh 中所处的位置 struts 是web框架(jsp,action,actionform) hibernate 是orm框架,处于数据持久层 spring 是容器框架,配置be ...

  3. VUE入门实例,模版组件用法

    这里每一个例子可以直接拷进body运行. 本系列为学习记录,并非大神教学案例. 仅仅整理用法,至于VUE的原理,设计模式等等暂不讨论,文中如有不对,还请大家帮忙指正,万分感激. 下一篇会写父子组件交互 ...

  4. MSP430WARE++的使用3:modbus模块的调用方法

    MSP430WARE++的使用3:modbus模块的调用方法     MSP430WARE是一套基于C++语言的开源的MSP430层次化软件架构,支持多种外设. 本文将介绍modbus模块驱动程序的调 ...

  5. mysql命令:set sql_log_bin=on/off

    对于数据库的操作,经常需要暂时停止对bin-log日志的写入,那就需要这个命令:set sql_log_bin=on/off 参考:dev.mysql.com/doc/refman/5.5/en/se ...

  6. 360 网络攻防 hackgame 解题报告(通关)

    地址:http://challenge.onebox.so.com/ 1.referrer or host 2.js decode 3.urldecode, ASCII 4.JFIF * 2 5.go ...

  7. SHELL $RANDOM产生的随机数范围是0到32767

    1.使用系统的 $RANDOM 变量 fdipzone@ubuntu:~$ echo $RANDOM 17617 fdipzone@ubuntu:~$ echo $RANDOM 17617 $RAND ...

  8. 【转】Android自动化测试(UiAutomator)——UiObject

    本文主要讲解使用UiAutomator的一些技巧,希望对于初学者有一定的帮助 UiObject 1.首先要声明对象 UiObject XXX = new UiObject(new Selector) ...

  9. 学习spring1--跟我一起学Spring 3(2)–开发环境配置

    http://www.importnew.com/13185.html#spring     首页 所有文章 资讯 Web 架构 基础技术 书籍 教程 我要投稿 更多频道 » - 导航条 - 首页 所 ...

  10. WPF TextBox 验证输入

    //验证输入为数字private void txt_time_KeyDown(object sender, KeyEventArgs e){ if (!((e.Key >= Key.D0 &am ...