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

 更新时间:2021年05月12日 09:58:54   作者:qqCeleste  
这篇文章主要给大家介绍了关于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列表数据删除后刷新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • el-select 数据回显,只显示value不显示lable问题

    el-select 数据回显,只显示value不显示lable问题

    这篇文章主要介绍了el-select 数据回显,只显示value不显示lable问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Vue3中Vite和Vue-cli的特点与区别详解

    Vue3中Vite和Vue-cli的特点与区别详解

    vue-cli是Vue早期推出的一款脚手架,使用webpack创建Vue项目,可以选择安装需要的各种插件,比如Vuex、VueRouter,下面这篇文章主要给大家介绍了关于Vue3中Vite和Vue-cli的特点与区别的相关资料,需要的朋友可以参考下
    2022-12-12
  • 详解vue组件基础

    详解vue组件基础

    本篇文章给大家总结了vue组件基础的相关知识点以及代码实例,有需要的朋友可以学习参考下。
    2018-05-05
  • vue3.0中sass全局的使用过程

    vue3.0中sass全局的使用过程

    这篇文章主要介绍了vue3.0中sass全局的使用过程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue3+ts+element-plus实际开发之统一调用弹窗封装的详细过程

    vue3+ts+element-plus实际开发之统一调用弹窗封装的详细过程

    这篇文章主要介绍了vue3+ts+element-plus实际开发之统一调用弹窗封装的详细过程,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-03-03
  • vue 父子组件共用mixins的注意点

    vue 父子组件共用mixins的注意点

    这篇文章主要介绍了vue 父子组件共用mixins的注意点,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 关于iview按需引用后使用this.$Modal报错的解决

    关于iview按需引用后使用this.$Modal报错的解决

    这篇文章主要介绍了关于iview按需引用后使用this.$Modal报错的解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • el-table表格动态合并行及合并行列实例详解

    el-table表格动态合并行及合并行列实例详解

    在使用el-table的时候经常会涉及到表格的列合并,包括表格操作列的合并,下面这篇文章主要给大家介绍了关于el-table表格动态合并行及合并行列的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-10-10
  • socket io与vue-cli的结合使用的示例代码

    socket io与vue-cli的结合使用的示例代码

    这篇文章主要介绍了socket io与vue-cli的结合使用的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • vue实现本地存储添加删除修改功能

    vue实现本地存储添加删除修改功能

    这篇文章主要为大家详细介绍了vue实现本地存储添加删除修改功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11

最新评论