vue 修改后刷新(Vue使用三种方法刷新页面)
类别:编程学习 浏览量:2108
时间:2021-11-04 19:49:44 vue 修改后刷新
Vue使用三种方法刷新页面我们在写项目的时候,经常会遇到,用户执行完某个动作,改变了某些状态,需要重新刷新页面,以此来重新渲染页面。如:用户登录成功、增加、删除、更新等。
- 原始方法:
location.reload();
- vue自带的路由跳转:
this.$router.go(0);
用过的人都知道,前两者都是强制刷新页面,会出现短暂的闪烁,用户体验效果不好。
所以,我们选择第三种方式:
- 首先在App里面写下如下代码:
<template> <li id="app"> <router-view v-if="isRouterAlive"></router-view> </li> </template> <script> export default { name: 'App', provide () { //父组件中通过provide来提供变量,在子组件中通过inject来注入变量。 return { reload: this.reload } }, data() { return{ isRouterAlive: true //控制视图是否显示的变量 } }, methods: { reload () { this.isRouterAlive = false; //先关闭, this.$nextTick(function () { this.isRouterAlive = true; //再打开 }) } }, } </script>
接下来,我们就可以在需要刷新页面的组件里这样写:
export default { inject:['reload'], //注入App里的reload方法 data () { return { ....... } },
在需要刷新页面的代码块中使用:
到此这篇关于Vue使用三种方法刷新页面的文章就介绍到这了,更多相关Vue刷新页面内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- vue项目打包上线的方法(vue项目打包以及优化的实现步骤)
- vue使用echarts教程(Vue使用echarts可视化组件的方法)
- vuecli打包项目(使用vue-cli创建项目并webpack打包的操作方法)
- vue是怎样进行页面跳转(Vue实现登陆跳转)
- vue组件keep-alive的原理是什么(如何理解Vue简单状态管理之store模式)
- vuex-table行列转换效果(vue3+el-table实现行列转换)
- vue指令使用技巧(Vue指令工作原理实现方法)
- vuejs全家桶入门教程交流(Vue全家桶入门基础教程)
- vue怎么在中间加图片(Vue实现多图添加显示和删除)
- vueelementui动态表格(Vue Element前端应用开发之常规的JS处理函数)
- vue的弹框怎么用(vue自定义弹框效果确认框、提示框)
- vue实现双向绑定原理(vue实现双向数据绑定)
- vue-router的安装(详解Vue-Router的安装与使用)
- vue设置div大小(Vue实现div滚轮放大缩小)
- vue怎么更换自定义水印(Vue之全局水印的实现示例)
- vue考试链接重置(Vue实现答题功能)
- 宁夏灵武恐龙化石发现始末(宁夏灵武恐龙化石发现始末)
- 到了岁末 临门一脚 节点,天台综合督评会目标直指 全年红(到了岁末临门一脚)
- 寒假余额不满24小时,不如来一场说走就走的亲子阅读之旅(寒假余额不满24小时)
- 省委书记出席的交流会,十位县委书记同场发言,代表公文材料的高水平(省委书记出席的交流会)
- 《刘老根3》热播,去世15年的她却再次被 伤害(去世15年的她却再次被)
- 十二星座爱情支配欲指数(十二星座爱情支配欲指数)
热门推荐
- pandas数据分组使用方法(在Pandas中DataFrame数据合并,连接concat,merge,join的实例)
- springboot docker教程(在Idea中使用Docker部署SpringBoot项目的详细步骤)
- python排列组合计算方法(Python实现的排列组合、破解密码算法示例)
- pythonmatplotlib怎么画区域(python matplotlib实现双Y轴的实例)
- jQuery on()方法
- php命名对照表(PHP命名空间用法实例分析)
- python使用门算法加密文件(python实现可逆简单的加密算法)
- sqlserverdatetime时区(解析SQL Server中datetimeset转换datetime类型问题)
- dedecms标签调用详解(Dedecms待审核文章在列表页显示的方法)
- hive数值转字符串(hive中将string数据转为bigint的操作)