vue列表数据删除后主动刷新页面及刷新方法详解

问题描述：

前端删除一条数据或者新增数据后，后端操作成功，但前端不会自动刷新，需要重新刷新当前页面
（用vue-router重新路由到当前页面，页面是不进行刷新的 ,采用window.reload()，或者router.go(0)刷新时，整个浏览器进行了重新加载）

解决：

provide / inject 组合

作用：允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

(声明reload方法，控制router-view的显示或隐藏，从而控制页面的再次加载)

App.vue 代码：

<template>
  <div id="app">
      <router-view v-if="isRouterAlive"></router-view>

  </div>
</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列表数据删除后刷新内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue router传递参数并解决刷新页面参数丢失问题

    Vue Router 传参方式: 1. this.$router.push({ name: '模块名称', params: { // 各参数 } }) router.js: export default new Router({ routes: [ { path: '/paramsPassingByRouter', component: ParamsPassingByRouter, children: [ { path: 'paramsMode', name: 'paramsMode', com

  • 解决vue刷新页面以后丢失store的数据问题

    刷新页面时vue实例重新加载,store就会被重置,可以把定义刷新前把store存入本地localStorage.sessionStorage.cookie中,localStorage是永久储存,重新打开页面时会读取上一次打开的页面数据,sessionStorage是储存到关闭为止,cookie不适合存大量数据.根据我的需求,最合适的是sessionStorage. beforeunload在页面刷新时触发,可以监听这个方法,让页面在刷新前存store到sessionStorage中. 当然,在

  • 如何处理vue router 路由传参刷新页面参数丢失

    如何处理vue router 路由传参刷新页面参数丢失

    概述 常见场景:点击列表的详情,跳转到详情内页,在内页根据传递的参数获取详情数据. 路由传参一般有如下几种方式,下面主要介编程式导航 router.push 的传参方式: 方法一:通过 params 传参 路由配置如下: { path: '/detail/:id', //若id后面加?代表这个参数是可选的 name: 'detail', component: Detail } 通过 $router.push 中 path 携带参数的方式 // 列表中的传参 goDetail(row) { thi

  • Vue使用三种方法刷新页面

    我们在写项目的时候,经常会遇到,用户执行完某个动作,改变了某些状态,需要重新刷新页面,以此来重新渲染页面.如:用户登录成功.增加.删除.更新等. 原始方法: location.reload(); vue自带的路由跳转: this.$router.go(0); 用过的人都知道,前两者都是强制刷新页面,会出现短暂的闪烁,用户体验效果不好. 所以,我们选择第三种方式: 首先在App里面写下如下代码: <template> <div id="app"> <rout

  • vue在App.vue文件中监听路由变化刷新页面操作

    在路由跳转时,会出现页面需要重新刷新一遍才能获取数据加载页面,这时添加一个监听器,如果跳转到页面刷新一次. export default { name: 'App', provide(){ return{ reload:this.reload } }, data(){ return { isRouterAlive:true, } }, //监听器 watch: { // 方法1 '$route' (to, from) { //监听路由是否变化 // console.log(999) if(to.

  • vue列表数据删除后主动刷新页面及刷新方法详解

    vue列表数据删除后主动刷新页面及刷新方法详解

    问题描述: 前端删除一条数据或者新增数据后,后端操作成功,但前端不会自动刷新,需要重新刷新当前页面 (用vue-router重新路由到当前页面,页面是不进行刷新的 ,采用window.reload(),或者router.go(0)刷新时,整个浏览器进行了重新加载) 解决: provide / inject 组合 作用:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效. (声明reload方法,控制router-view的显示或隐藏,从而控制页

  • vue主动刷新页面及列表数据删除后的刷新实例

    1.场景 在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求. 2.遇到的问题 1. 用vue-router重新路由到当前页面,页面是不进行刷新的 2.采用window.reload(),或者router.go(0)刷新时,整个浏览器进行了重新加载,闪烁,体验不好 3.解决方法 provide / inject 组合 作用:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效. App.vue: 声明reload方法,控制

  • vue列表数据发生变化指令没有更新问题及解决方法

    问题描述,在vue的for循环中使用了指令,然后对数据进行筛选的时候,发现指令没有起作用. 如图前面的图标是根据文件名的后缀名,返回响应图标的,通过指令实现的.然后我们在搜索框中删选以后,数据更新了,但是图标没有更新 分析原因 <div v-for="(item, index) in myDate" :key='index'> ... </div> 问题就出在了:key='index'因为vue中for循环是根据key的值的变化来更新vnode的,很显然我们经过

  • 改变vue请求过来的数据中的某一项值的方法(详解)

    由于 JavaScript 的限制, Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue 当你修改数组的长度时,例如:vm.items.length = newLength 在 <template> <div> <ul> <li v-for = " (item,index) in list" v-text='`${item} - ${index} `'>&

  • 微信小程序实现页面导航的方法详解

    微信小程序实现页面导航的方法详解

    目录 一.页面导航 二.声明式导航 1.导航到tabBar页面 2.导航到非tabBar页面 3.后退导航 三.编程式导航 1.导航到tabBar页面 2.导航到非tabBar页面 3.后退导航 四.导航传参 1.声明式导航传参 2.编程式导航传参 3.在onLoad中接收导航传参 五.总结 一.页面导航 1.什么是页面导航 页面导航是指页面之间的相互跳转. 2.页面导航的两种实现方式 页面导航有两种实现方式: 声明式导航 方法:在页面声明一个navigator组件,通过点击这个组件来实现页面的

  • 对pandas中iloc,loc取数据差别及按条件取值的方法详解

    Dataframe使用loc取某几行几列的数据: print(df.loc[0:4,['item_price_level','item_sales_level','item_collected_level','item_pv_level']]) 结果如下,取了index为0到4的五行四列数据. item_price_level item_sales_level item_collected_level item_pv_level 0 3 3 4 14 1 3 3 4 14 2 3 3 4 14

  • js刷新页面location.reload()用法详解

    本文介绍了js刷新页面函数location.reload()的用法,有关js location.reload()函数的例子,有需要的朋友参考下. 在javascript编程中,多使用location.reload实现页面刷新. 例子: window.location.href=window.location.href; window.location.reload; 经测试,这两句在某些情况下可以代替location.reload(true); 而不会出现重试对话框达到刷新的效果 在js中实现刷

  • javascript监听页面刷新和页面关闭事件方法详解

    javascript监听页面刷新和页面关闭事件方法详解

    在我们的日常生活中,时常遇到这么一种情况,当我们在点击一个链接.关闭页面.表单提交时等情况,会提示我们是否确认该操作等信息. 这里就给大家讲讲javascript的onbeforeunload()和onunload()两个事件. 相同点: 两者都是在对页面的关闭或刷新事件作个操作. 不同点: unbeforeunload()事件执行的顺序在onunload()事件之前发生.(因为,unbeforeunload()是在页面刷新之前触发的事件,而onubload()是在页面关闭之后才会触发的). u

  • AJAX请求数据及实现跨域的三种方法详解

    AJAX请求数据及实现跨域的三种方法详解

    目录 传统方法的缺点: 什么是ajax? XMLHttpRequest 对象 五步使用法: 同步和异步的区别: 如何将原生ajax进行封装 JS几种跨域方法和原理 附:ajax跨域post请求的java代理实现 总结 传统方法的缺点: 传统的web交互是用户触发一个http请求服务器,然后服务器收到之后,在做出响应到用户,并且返回一个新的页面,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互.只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户

  • Java删除二叉搜索树的任意元素的方法详解

    本文实例讲述了Java删除二叉搜索树的任意元素的方法.分享给大家供大家参考,具体如下: 一.删除思路分析 在删除二叉搜索树的任意元素时,会有三种情况: 1.1 删除只有左孩子的节点 节点删除之后,将左孩子所在的二叉树取代其位置:连在原来节点父亲元素右节点的位置,比如在图中需要删除58这个节点. 删除58这个节点后,如下图所示: 1.2 删除只有右孩子的节点: 节点删除之后,将右孩子所在的二叉树取代其位置:连在原来节点的位置,比如在下图中需要删除58这个节点. 删除58这个节点后,如下图所示: 这

随机推荐