场景:

有时候我们在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. python面向对象--item方法

    class Foo: def __getitem__(self, item): print("getitem") return self.__dict__[item] def __ ...

  2. web框架之初识Django

    目录 一.web框架 1.1什么是web框架 1.2自制的简易web框架 1.3三大主流web框架简介 Django Flask Tornado 1.4动态网页与静态网页 二.初识Django框架 2 ...

  3. [BZOJ] IOI2015 Boxes纪念品盒

    问题描述 IOI2015 开幕式正在进行最后一个环节.按计划在开幕式期间,每个代表队都将收到由主办方发放的一个装有纪念品的盒子.然而所有志愿者都被精彩的开幕式所吸引,除 Aman外其他人完全忘记了发放 ...

  4. TreeMap定制排序和自然排序

    TreeMap定制排序和自然排序自然排序是实现Comparable接口的方法.代码如下: @Override public int compareTo(Object o) { if (o instan ...

  5. 简单的使用redis

    心不慌手不抖我们跟着大哥走 https://blog.csdn.net/zhangcongyi420/article/details/82686702

  6. web应用,http协议简介,web框架

    一.web应用 web应用程序是一种可以通过Web访问的应用程序,程序的最大好处是用户很容易访问应用程序,用户只需要有浏览器即可,不需要再安装其他软件.应用程序有两种模式C/S.B/S.C/S是客户端 ...

  7. vim安装bundle和使用

    一.准备工作 安装Git(因为下面我们选择的插件管理器需要使用到它)安装其他插件前首先需要选择一个Vim插件管理器,我这里选择的是Vundle,Vundle的工作过程中需要通过Git自动从远程创库同步 ...

  8. ubuntu 18.04下Chromium设置为系统代理

    前言 在ubuntu 18.04下挂上ss后firefox能直接上google了但是chromium上不去 会出现下面两种情况 # This site can't be reached xxxxxx ...

  9. windows连接ubuntu服务器方式

    如图,打开cmd, 输入 ssh imkow@www.dorian.vip 参数解析: ssh:secure shell的缩写 imknow  是用户名 www.dorian.vip 是域名,没有域名 ...

  10. spring管理的事务

    之前对spring的事务传播机制没有概念,花点时间去看了事务的源码,以及这些事务传播机制使用的文档,在此做一下简单的笔记 正文 下面说提到的共享事务的意思就是几个service共用同一个事务,如传播机 ...