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离线地图有哪些(vue 集成腾讯地图实现api附DEMO)
- vue的弹框怎么用(vue自定义弹框效果确认框、提示框)
- elementui和vue详解(Vue+Element UI实现概要小弹窗的全过程)
- vue设置div大小(Vue实现div滚轮放大缩小)
- vue单元测试实例(Vue-Jest 自动化测试基础配置详解)
- vue验证码(vue_drf实现短信验证码)
- mongovue的使用
- vue点击事件动态禁用(vue开发移动端使用better-scroll时click事件失效的解决方案)
- vue3 composition api用法(vue3中provide和inject的使用)
- vue中如何判断请求状态码(关于VUE的编译作用域及slot作用域插槽问题)
- vueaxios使用教程交流(Vue使用axios图片上传遇到的问题)
- vue本地图片切换(vue动态加载本地图片的处理方法)
- vue router用法(如何在Vue 3中扩展Vue Router链接详解)
- vue如何导入excel(Vue实现导入Excel功能步骤详解)
- vue3.0全家桶教程elementui学习(vite+vue3.0+ts+element-plus快速搭建项目的实现)
- 刘智泰确认出演《Good Wife》 担纲男一号(刘智泰确认出演Good)
- 《傲骨之战》剧终 律政女魔头Diane,为什么是大女主天花板(傲骨之战剧终律政女魔头Diane)
- 汉族(汉族的祖先是谁)
- 中国有几个名族(中国有几个民族没列入56个民族)
- 数学语文题目(语文的数学题)
- 香蕉(香蕉三种人不宜吃)
热门推荐
- phpstudy数据库搭建教程交流(phpStudy V8如何修改数据库root密码)
- nginx 一个域名对应多个项目(nginx前后端同域名配置的方法实现)
- ubuntu下使用vscode(使用Vscode结合docker进行开发的详细过程)
- apache的日志配置(apache 配置成滚动日志的方法)
- zabbix支持oracleodbc功能吗(使用zabbix监控oracle数据库的方法详解)
- 用css实现图片特效代码(HTML+CSS+JavaScript实现图片3D展览的示例代码)
- sqlserver数字格式化五位小数(详细分析sqlserver中的小数类型float和decimal)
- sql语句left+join详解(SQL语句中JOIN的用法场景分析)
- docker容器启动执行脚本(在docker容器中使用非root用户执行脚本操作)
- IIS应用程序池中ApplicationPoolIdentity
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9