1.使用window.location.href window.location.replace() window.location.reload()

会出现空白,体验不是很好

2.先进入一个空路由,然后返回

reflashPage(){
let NewPage = '_empty' + '?time=' + new Date().getTime()/500;
this.$router.push(NewPage);
this.$router.go(-1);
}

刷新后点浏览器的前进按钮会出现空白页

3.使用 provide / inject

简单的来说就是在父组件中通过provide来提供变量,然后在子组件中通过inject来注入变量。

app.vue

<template>
<div id="app">
<router-view v-if="isRouterAlive"></router-view>
</div>
</template>
<script>
export default {
name: 'App',
provide(){
return{
reload:this.reload
}
},
data(){
return{
isRouterAlive:true
}
},
methods:{
reload(){
this.isRouterAlive = false;
this.$nextTick(function(){
this.isRouterAlive = true;
})
}
}
}
</script>

需要跳转的页面: 前面会有这个 inject

export default {
inject:['reload'],
data () {
return {
...
}
},

后面想刷新当前页面的地方这样写:

this.reload();

Vue是双向数据绑定的,操作数据实时变化,大多情况不需要刷新页面。

之前在做表单清空时用到了页面刷新,表单的数据比较多逐个清空比较麻烦。

最近做页面拖拽排版效果,使用了jq的插件操作dom没有同时操作数据,导致数据和dom不一致,后来选择用刷新页面来做到统一。

vue 刷新当前页面的方式的更多相关文章

  1. vue 刷新当前页面的时候重新调用新的cookie

    data() { return{ AdminToken: this.getCookie('token'), } }, updated() { //刷新当前页面的时候重新调用新的cookie this. ...

  2. javascript刷新当前页面的几种方式

    这里总结一下JavaScript刷新当前页面的几种方式. 1.history对象. history.go(0); 2.location对象. location.reload(); location = ...

  3. js刷新当前页面的5种方式

    1. reload reload 方法,该方法强迫浏览器刷新当前页面.语法:location.reload([bForceGet])   参数: bForceGet, 可选参数, 默认为 false, ...

  4. JS刷新当前页面的几种方法总结

    reload 方法,该方法强迫浏览器刷新当前页面. 语法:location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当前页 ...

  5. js刷新当前页面的几种方法

    如何实现刷新当前页面呢?借助js你将无所不能. 1,reload 方法,该方法强迫浏览器刷新当前页面.语法:location.reload([bForceGet])   参数: bForceGet, ...

  6. easyui 只刷新当前页面的数据 datagrid reload 方法

    $('#refreshbtn').click(function() { $("#t_auclot").datagrid("reload",serializeFo ...

  7. URL不变的情况下,最实用的vue刷新当前页面,provide / inject 组合 方式实现vue页面刷新

    原文:https://blog.csdn.net/Dream_xun/article/details/83024487 其他参考:https://blog.csdn.net/liyunkun888/a ...

  8. 微信小程序获取当前页面的路径的方式

    使用getCurrentPages可以获取当前加载中所有的页面对象的一个数组,数组最后一个就是当前页面. var pages = getCurrentPages() //获取加载的页面 var cur ...

  9. vue刷新子页面,跳到主页,params传参引起的血案!

    今天,算是真正认识了params传参,为什么说params传参引起了血案? 起因是这样的,我正在做一个登陆的模块,公司想根据url不同的参数来区分是什么类型的会议, 于是后端推荐我用params传参的 ...

随机推荐

  1. android selector设置button点击效果(具体)以及常见问题

    button的点击效果学习起来其实比較easy,此点对开发人员来说也是使用的比較频繁的一个知识点,与它相关的还有编辑框的获取焦点时改变背景颜色.选择button选择时改变字体颜色等等.这些其实都是用到 ...

  2. php中局部变量和全局变量

    php中局部变量和全局变量 代码1:函数内部使用函数外部变量错误方法 <?php $name = 'fish'; function animal() { echo $name; } animal ...

  3. cf B. Black Square

    B. Black Square time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...

  4. CentOS中实现与Ubuntu下apt-get install build-essential功能类似的命令

    CentOS中实现与Ubuntu下apt-get install build-essential功能类似的命令 在Ubuntu中安装完系统后,可以直接使用apt-get install build-e ...

  5. ES6特性-带标签的模板字符串(tagged template)

    tagged template: 加在模板字符串前面加一个标签(函数). let dessert = = '甜品' drink = '茶' let breakfast = kitchen`今天的早餐是 ...

  6. 昼猫笔记 从此告别复杂代码--JavaScript

    昼猫笔记--给你带来不一样的笔记 不止是笔记 更多的是思考 大家好,我是一只来自喵星的前端初学者,由于我们喵星人科技较为落后,昼猫从今天开始带着使命来到地球学习前端知识. 从今天开始,猫猫我就从Jav ...

  7. 使用acme.sh快速生成SSL证书

    起因 早上收到了一封来自MySSL EE <noreply@notify.myssl.com>的邮件提示证书即将过期, 少于7天,但是acme.sh应该是60天自动renew的.于是查看下 ...

  8. 【Uva 10817】Headmaster's Headache

    [Link]: [Description] 一个学校,有s门课程(1<=s <=8),里面本身已经有m个老师了,然后还想招聘n个老师: 给出这m个老师和n个来应聘的老师的信息; (c[i] ...

  9. CODEVS——T 4189 字典

    http://codevs.cn/problem/4189/  时间限制: 1 s  空间限制: 256000 KB  题目等级 : 大师 Master 题解  查看运行结果     题目描述 Des ...

  10. 检查类型是否包含iterator