vue项目刷新当前页面
场景:
有时候我们在vue
项目页面做了一些操作,需要刷新一下页面。
解决的办法及遇到的问题:
this.$router.go(0)
。这种方法虽然代码很少,只有一行,但是体验很差。页面会一瞬间的白屏,体验不是很好- 用
vue-router
重新路由到当前页面,页面是不进行刷新的。 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
方法
直接调用this.reload
参考文章
VUE官方文档:$dispatch 和 $broadcast 替换
原文地址:https://segmentfault.com/a/1190000017007631
vue项目刷新当前页面的更多相关文章
- (转)vue项目刷新当前页面
场景: 有时候我们在vue项目页面做了一些操作,需要刷新一下页面. 解决的办法及遇到的问题: this.$router.go(0).这种方法虽然代码很少,只有一行,但是体验很差.页面会一瞬间的白屏,体 ...
- vue案例 - vuex+sessionstorage解决vue项目刷新后页面空白/数据丢失
第一部分 SessionStorage 首先查看sessionStorage的地方在控制台的 Application > Storage > Session Storage这里: 根据se ...
- vue项目刷新页面,使数据不丢失(sessionStorage、localStorage、cookie)
vue项目刷新页面时,存储在vuex中的数据会丢失,把他们存到stroage中可以保证不丢失.
- Vue. 之 刷新当前页面,重载页面数据
Vue. 之 刷新当前页面,重载页面数据 如下截图,点击左侧不同的数据,右侧根据左侧的KEY动态加载数据.由于右侧是同一个页面,在进行路由跳转后,不会再次刷新数据. 解决方案: 右侧的页面中 scri ...
- vue项目,子页面刷新404问题
翻车事故分析: 因需对项目整体优化,调整过程,采用了路由的history模式,本地项目运行,刷新子页面都是OK的. 部署到测试服务器,正常跳转都ok,但刷新子页面就会出现404,请求变成了get,没有 ...
- vue 项目 跳转 页面 不刷新 问题
vue项目中需要导出下载客户数据,因为数据太多,响应太慢.后台直接上传给七牛 然后返回一个下载链接 前端通过跳转链接 来下载 riskManagementApi.friendExprotAll(t ...
- VUE 项目刷新路由指向index.html
背景描述: VUE 项目经过 npm run bulid 生成静态文件上传到服务器后,当我们切换路由并刷新页面,nginx 服务器会报 502 或者 404 错误. 原因分析: 我猜测是因为在 VUE ...
- Vue.js刷新当前页面
Vue.js的路由跳转很强大,类似ajax的局部刷新,路由跳转时候页面是不刷新的,刷新当前页面的功能不建议用,但是有的时候确实需要刷新当前页面来实现某些需求,这个时候,我们有三 种方法可以实现. 第一 ...
- 前端Vue项目——首页/课程页面开发及Axios请求
一.首页轮播图 1.elementUI走马灯 elementUI中 Carousel 走马灯,可以在有限空间内,循环播放同一类型的图片.文字等内容. 这里使用指示器样式,可以将指示器的显示位置设置在容 ...
随机推荐
- 洛谷—— P1407 工资
https://www.luogu.org/problemnew/show/P1407 题目描述 有一家世界级大企业,他们经过调查,发现了一个奇特的现象,竟然在自己的公司里,有超过一半的雇员,他们的工 ...
- jenkins+gitlab发布maven项目
1.简介:什么是Maven Maven是一个项目管理和综合工具.Maven提供给开发人员构建一个完整的生命周期框架; 开发团队可以自动完成该项目的基础设施建设,Maven使用标准的目录结构和默认构建生 ...
- sort、dirname、添加环境变量、修改主机名、别名IP、静态路由
1.split-按照指定行数或大小分割文件 -l:指定行数 -a:指定文件后缀长度 -d:使用数字作为后缀 -b:指定大小 # 以10行为单位对文件进行分割 split -l 10 /etc/init ...
- TreeSet, LinkedHashSet and HashSet 的区别
1. 介绍 TreeSet, LinkedHashSet and HashSet 在java中都是实现Set的数据结构 # TreeSet的主要功能用于排序 # LinkedHashSet的主要功能用 ...
- 【sublime text 3】sublime text 3 汉化
快捷键:Ctrl+Alt+P 输入快捷键Ctrl+Shift+P 在出现的文本框中输入Install Package(或直接输入“ip”)选中packageControl:Install Packag ...
- TCP通过滑动窗口和拥塞窗口实现限流,能抵御ddos攻击吗
tcp可以通过滑动窗口和拥塞算法实现流量控制,限制上行和下行的流量,但是却不能抵御ddos攻击. 限流只是限制访问流量的大小,是无法区分正常流量和异常攻击流量的. 限流可以控制本软件或者应用的流量大小 ...
- mysql 授权新的root用户
grant all privileges to *.* on system@'localhost' identified by 'woshishui' with grant option;
- POJ2386 Lake Counting 【DFS】
Lake Counting Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 20782 Accepted: 10473 D ...
- 无线热点登陆认证原理探究---captive portal
什么是Captive Portal 大家肯定都连过公共场所的wifi热点,比如麦当劳等地方的.他们的wifi往往一连上去就会弹出一个要求登录或者微信关注之类的页面,只有在这个页面完成操作了才能正常访问 ...
- 内核顶层Makefile相关1
http://www.groad.net/bbs/simple/?f104.htm $(Q) 变量 内核 Makefile 文件 238 行到 259 行的注释中知道,$(Q) 变量的作用是决定是否在 ...