场景:

有时候我们在vue项目页面做了一些操作,需要刷新一下页面。

解决的办法及遇到的问题:

  1. this.$router.go(0)。这种方法虽然代码很少,只有一行,但是体验很差。页面会一瞬间的白屏,体验不是很好
  2. vue-router重新路由到当前页面,页面是不进行刷新的。
  3. location.reload()。这种也是一样,画面一闪,体验不是很好

推荐解决方法:

provide / inject 组合
原理:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效

App.vue,声明reload方法,控制router-view的显示或隐藏,从而控制页面的再次加载。

<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>

在需要用到刷新的页面。在页面注入App.vue组件提供(provide)的 reload 依赖,在逻辑完成之后(删除或添加...),直接this.reload()调用,即可刷新当前页面。

注入reload方法

export default {

    inject: ['reload'],--注入

    components: {

  },

直接调用

this.reload();

原贴: https://segmentfault.com/a/1190000017007631

(转)vue项目刷新当前页面的更多相关文章

  1. vue项目刷新当前页面

    场景: 有时候我们在vue项目页面做了一些操作,需要刷新一下页面. 解决的办法及遇到的问题: this.$router.go(0).这种方法虽然代码很少,只有一行,但是体验很差.页面会一瞬间的白屏,体 ...

  2. vue案例 - vuex+sessionstorage解决vue项目刷新后页面空白/数据丢失

    第一部分 SessionStorage 首先查看sessionStorage的地方在控制台的 Application > Storage > Session Storage这里: 根据se ...

  3. vue项目刷新页面,使数据不丢失(sessionStorage、localStorage、cookie)

    vue项目刷新页面时,存储在vuex中的数据会丢失,把他们存到stroage中可以保证不丢失.

  4. Vue. 之 刷新当前页面,重载页面数据

    Vue. 之 刷新当前页面,重载页面数据 如下截图,点击左侧不同的数据,右侧根据左侧的KEY动态加载数据.由于右侧是同一个页面,在进行路由跳转后,不会再次刷新数据. 解决方案: 右侧的页面中 scri ...

  5. vue项目,子页面刷新404问题

    翻车事故分析: 因需对项目整体优化,调整过程,采用了路由的history模式,本地项目运行,刷新子页面都是OK的. 部署到测试服务器,正常跳转都ok,但刷新子页面就会出现404,请求变成了get,没有 ...

  6. vue 项目 跳转 页面 不刷新 问题

    vue项目中需要导出下载客户数据,因为数据太多,响应太慢.后台直接上传给七牛  然后返回一个下载链接  前端通过跳转链接 来下载 riskManagementApi.friendExprotAll(t ...

  7. VUE 项目刷新路由指向index.html

    背景描述: VUE 项目经过 npm run bulid 生成静态文件上传到服务器后,当我们切换路由并刷新页面,nginx 服务器会报 502 或者 404 错误. 原因分析: 我猜测是因为在 VUE ...

  8. Vue.js刷新当前页面

    Vue.js的路由跳转很强大,类似ajax的局部刷新,路由跳转时候页面是不刷新的,刷新当前页面的功能不建议用,但是有的时候确实需要刷新当前页面来实现某些需求,这个时候,我们有三 种方法可以实现. 第一 ...

  9. 前端Vue项目——首页/课程页面开发及Axios请求

    一.首页轮播图 1.elementUI走马灯 elementUI中 Carousel 走马灯,可以在有限空间内,循环播放同一类型的图片.文字等内容. 这里使用指示器样式,可以将指示器的显示位置设置在容 ...

随机推荐

  1. TensorFlow学习笔记1:graph、session和op

    graph即tf.Graph(),session即tf.Session(),很多人经常将两者混淆,其实二者完全不是同一个东西. graph定义了计算方式,是一些加减乘除等运算的组合,类似于一个函数.它 ...

  2. CentOS7 设置电源选项,待机、睡眠、挂起

    设置装有 CentOS7 的笔记本合盖后黑屏进入睡眠模式 systemd 能够处理某些电源相关的 ACPI事件,你可以通过从 /etc/systemd/logind.conf 以下选项进行配置: Ha ...

  3. Codeforces Round #421 (Div. 2) - B

    题目链接:http://codeforces.com/contest/820/problem/B 题意:给定一个正n边形,然后让你选择3个不同的顶点,使得这3个顶点形成的角度尽可能的接近a. 思路:首 ...

  4. 2018-09-25-weekly

    Algorithm 两数相加 What 给定两个非空链表来表示两个非负整数.位数按照逆序方式存储,它们的每个节点只存储单个数字.将两数相加返回一个新的链表. How 两个链表长度相同的部分,对位相加, ...

  5. js格式化数字或者小数,加入千分符(此次为”,“)

    function npChangeNum(num) { var tag = (num || 0).toString().split("."); tag[0] = tag[0].re ...

  6. POJ 2960 S-Nim (sg函数)

    题目链接:http://poj.org/problem?id=2960 题目大意:给定数组S,接下来给出m个游戏局面.游戏局面是一些beads堆,先给出堆数,然后是每一堆中beads的数目.游戏规则是 ...

  7. myeclipce注册

    今天提示MyEclipse Trial Expired,如何手动获取MyEclipse 注册码! 1.建立JAVA Project,随便命名,只要符合规则就行. 2.在刚刚建好的Project右击sr ...

  8. 提高Service优先级

    在onStartCommand()方法中开启一个通知,提高进程的优先级.注意:从Android 8.0(API级别26)开始,所有通知必须要分配一个渠道,对于每个渠道,可以单独设置视觉和听觉行为.然后 ...

  9. php面试专题---17、MySQL的SQL语句编写考点

    php面试专题---17.MySQL的SQL语句编写考点 一.总结 一句话总结: 注意:只写精品 1.MySQL的关联UPDATE语句? 关键UPDATE A,B:UPDATE A,B SET A.c ...

  10. face_recognition开源人脸识别库:离线识别率高达99.38%

    基于Python的开源人脸识别库:离线识别率高达99.38%——新开源的用了一下感受一下 原创 2017年07月28日 21:25:28 标签: 人脸识别 / 人脸自动定位 / 人脸识别开源库 / f ...