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. HBase总结(十八)Hbase rowkey设计一

    hbase所谓的三维有序存储的三维是指:rowkey(行主键),column key(columnFamily+qualifier),timestamp(时间戳)三部分组成的三维有序存储. 1.row ...

  2. CMD常用功能

    1.导出文件目录树状结构 命令:“tree>file.txt /f”

  3. CentOS7中关闭selinux

    在安装Cobbler和Puppet时需要关闭selinux,但是通常情况下载安装完CentOS7后,默认情况下SElinux是启用状态, 如下所示: [csharp] view plaincopy   ...

  4. 红茶一杯话Binder (传输机制篇_下)

    红茶一杯话Binder (传输机制篇_下) 侯 亮 1 事务的传递和处理 从IPCThreadState的角度看,它的transact()函数是通过向binder驱动发出BC_TRANSACTION语 ...

  5. python3输出指定log信息

    问题背景: win10 python xxx.py > c:test.txt 上面这句只能把信息输出到test.txt,但是控制台看不到信息 ########################## ...

  6. ArrayList和Vector性能对比

    测试条件: 循环次数:1千万次 元素个数:1000个 测试结果: 总结:ArrayList获取元素非常快,不过添加元素没有Vector快,两者各有优势,Vector是线程安全的,而ArrayList是 ...

  7. 《排序算法》——堆排序(大顶堆,小顶堆,Java)

    十大算法之堆排序: 堆的定义例如以下: n个元素的序列{k0,k1,...,ki,-,k(n-1)}当且仅当满足下关系时,称之为堆. " ki<=k2i,ki<=k2i+1;或k ...

  8. abp的权限与导航菜单的关系

    原来以为各是各的,所以就有了第一个版本.Getallmentus.然后注入了role,当然失败了.获取所有的菜单.一直在思考在什么地方设置菜单是否展示呢? 后面看了源码.才发现自己错了. UserNa ...

  9. easyUI combox静态动态联动

    easyUI重写了select,取而代之的是combobox,有如下几种方式可以创建一个combobox 1.使用select标签,并加上class="easyui-combobox&quo ...

  10. TP view中跳转到某个控制器

    #直接用 __MODULE__/控制器名/方法名/参数名/参数 <a href="__MODULE__/Product/list_table/goods_id/<?php ech ...