vue数据改变页面不刷新(vue列表数据删除后主动刷新页面及刷新方法详解)
类别:编程学习 浏览量:2636
时间:2022-04-02 14:05:27 vue数据改变页面不刷新
vue列表数据删除后主动刷新页面及刷新方法详解问题描述:
前端删除一条数据或者新增数据后,后端操作成功,但前端不会自动刷新,需要重新刷新当前页面
(用vue-router重新路由到当前页面,页面是不进行刷新的 ,采用window.reload(),或者router.go(0)刷新时,整个浏览器进行了重新加载)
解决:
provide / inject 组合
作用:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。
(声明reload方法,控制router-view的显示或隐藏,从而控制页面的再次加载)
App.vue 代码:
<template> <li id="app"> <router-view v-if="isRouterAlive"></router-view> </li> </template> <script> export default { name: 'App', components: {}, provide(){ return { reload: this.reload } }, data() { return { isRouterAlive: true, }; }, cread() {}, methods: { reload(){ this.isRouterAlive = false; this.$nextTick(function(){ this.isRouterAlive = true; }) } }, mounted() { }, } </script> <style> </style>
使用方式:
// 引用vue reload方法 inject: ['reload'], //在方法中调用 this.reload()
总是要在少年之时走的更好更远,才能不辜负自己和背后的坚定!加油!
总结
到此这篇关于vue列表数据删除后主动刷新页面及刷新方法的文章就介绍到这了,更多相关vue列表数据删除后刷新内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- vue实现展开动画(Vue组件实现旋转木马动画)
- vue3 axios 怎么封装api(vue中如何简单封装axios浅析)
- vue自定义列组件(vue自定义表格列的实现过程记录)
- vue中的ref(Vue3.0中Ref与Reactive的区别示例详析)
- vuex数据持续化(Vuex数据持久化实现的思路与代码)
- vue怎么接收后台的数据(Vue封装全局toast组件的完整实例)
- vue怎么使用element(Vue Element前端应用开发之图标的维护和使用)
- vue-router的安装(详解Vue-Router的安装与使用)
- vue代码统计(Vue实现计数器案例)
- vue左右联动列表(vue+iview的菜单与页签的联动方式)
- vue3.0带参数的方法(Vue3中ref与toRef的区别浅析)
- vue怎么更换自定义水印(Vue之全局水印的实现示例)
- vue项目引入element页面(vue-element-admin项目导入和导出的实现)
- vue实现pc聊天页面(vue实现web在线聊天功能)
- vuex中action的值怎么接(vuex中Getter的用法详解)
- vue路由跳转自动定位在哪里(Vue路由this.route.push跳转页面不刷新的解决方案)
- 吴彦祖陈冠希 恩怨 ,失去曾让他流泪的女友,终遇走过18年真爱(吴彦祖陈冠希恩怨)
- 痴情男神 吴彦祖 与妻子恋爱8年,结婚10年,家庭幸福美满(痴情男神吴彦祖)
- 成功破圈,小牛电动SQi强势开 跨(小牛电动SQi强势开)
- 挑战新国标电自天花板,九号机械师MMAX 110P深度体验(挑战新国标电自天花板)
- 《满江红》不要只当电影看,学生应该这样做(满江红不要只当电影看)
- 电影《民间怪谈录之走阴人》定档8月5日,开启一场中式惊悚之旅(电影民间怪谈录之走阴人定档8月5日)
热门推荐
- cpu怎么访问php(服务器大量php-cgi.exe进程导致CPU占用100%的解决方法)
- mysql权限设置
- 前端单行文本垂直居中(移动端的text-overflow多行文本溢出显示省略号…)
- 云服务器可以搭建几个网站(使用云服务器搭建网站的注意事项)
- 国内云主机哪家靠谱(云主机哪家比较便宜)
- python分词操作(Python英文文本分词无空格模块wordninja的使用实例)
- 怎么写css效果最好(提高CSS代码效率的编写技巧)
- mysql多核cpu利用(mysql CPU高负载问题排查)
- mysql根据子节点查询父节点(mysql 递归查找菜单节点的所有子节点的方法)
- webui控件在前端开发中的作用(HTML5 weui使用笔记)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9