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. Spring AOP事务管理(使用切面把事务管理起来)

    在<Spring Transaction 分析事务属性(事务的基本概念.配置)>基础上 http://blog.csdn.net/partner4java/article/details/ ...

  2. shll 基础讲解

    http://www.cnblogs.com/suyang/archive/2008/05/18/1201990.html Shell编程基础 $# 命令行得到的参数个数 $@ 命令行得到的所有参数作 ...

  3. nodejs 获取指定路径下所有的文件夹名

    示例:获取 ./components 下所有的文件夹名称 let components = [] const files = fs.readdirSync('./components') files. ...

  4. MVC的设计模式在JavaWeb中的实现

    JSP开发模式 jsp开发模式的发展 1.模式1:(适合小型项目的技术的开发)     a.第一版本号,纯jsp(封装数据.处理数据,显示数据)     b.第二版本号,Jsp+JavaBean.   ...

  5. Strategy模式

    Strategy模式 Strategy模式要解决的问题和Template模式类似.都是为了把算法的声明和算法的实现解耦.Template模式是通过继承来实现的,而Strategy模式是通过组合来实现的 ...

  6. socket编程之多次收发数据

    客户端: #-*- coding:utf-8 -*- #客户端程序 import socket client = socket.socket() #1.创建一个客户端对象 client.connect ...

  7. sql server 数据库基础知识(二)

    CASE函数用法1:单值判断,相当于switch caseCASE expression WHEN value1 THEN returnvalue1 WHEN value2 THEN returnva ...

  8. 学习笔记 - Unity是如何将你的项目发布到如此多的平台的?

    很多Unity的开发者是不是都会觉得Unity能把项目导出发布到那么多不同的平台上运行是件很牛X的事情?那么你有没有想过Unity是如何做到的呢?本文就来大体的聊一聊Unity做的这件神奇的事情. 概 ...

  9. html 标签 图片

    <img src="e:/image/a.png"/> 在html中,图片是一个字符. <img src=" e:/image/a.png" ...

  10. iOS10 获取系统通讯录新方法

    #import <ContactsUI/ContactsUI.h> 遵循代理 CNContactPickerDelegate 调用通讯录 如果在iOS10的机器上调用以前的ABPeople ...