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. Atitit.得到网络邻居列表java php c#.net python

    Atitit.得到网络邻居列表java php c#.net python 1. 获取workgroup  net view /domain1 2. 得到网络邻居列表1 3. 得到机器的ip  通过p ...

  2. Aurora学习笔记连载一:仿真平台搭建

    由于公司项目需要,需要学习Aurora协议,才有了这样的连载学习笔记,也算是对自己学习的一份记录吧. 对于Aurora是什么,大家自行百度. 当然,Kevin也在此先提醒大家,本套学习笔记不是你想学就 ...

  3. SpringMVC请求使用@PathVariable获取文件名称并且文件名中存在.导致路径被截取的问题

    在SpringMVC中,当使用@pathVariable通过Get请求获取路径名称时,如果路径名称上存在小数点,则获取不到小数点后面的内容,会被Spring截取. 比如我获取某一文件,路径是local ...

  4. linux命令-进阶1

    Linux查看系统信息的一些命令及查看已安装软件包的命令 centos下如何查看某个软件是否安装http://www.landui.com/help/show-3959.html CentOS 下 r ...

  5. abp主机用户不过滤租户id

    using (_unitOfWorkManager.Current.DisableFilter(DataFilterUtil.NowDisableFilter(AbpSession))) { var ...

  6. LeetCode406. Queue Reconstruction by Height Add to List

    Description Suppose you have a random list of people standing in a queue. Each person is described b ...

  7. UVa 12563 劲歌金曲 刘汝佳第二版例题9-5;

    Problem J Jin Ge Jin Qu [h]ao (If you smiled when you see the title, this problem is for you ^_^) Fo ...

  8. UML结构体系简介

    一.UML的结构 UML有3种基本的构造块,分别是事物(元素).关系和图.事物是UML中重要的组成部分.关系把事物紧密联系在一起.图是很多有相互相关的事物的组. 二.UML的事物 UML中的事物也称为 ...

  9. Power Network - poj 1459 (最大流 Edmonds-Karp算法)

      Time Limit: 2000MS   Memory Limit: 32768K Total Submissions: 24788   Accepted: 12922 Description A ...

  10. Linux 文件管理(系统函数)

    //read函数 #include <stdio.h> #include <stdlib.h> #include <unistd.h> /* STDIN_FILEN ...