vue如何刷新当前页面

1.场景

在处理列表是，常常有删除一条数据或者新增一条数据之后需要重新刷新当前页面的需求。

2.遇到的问题

（1）用vue-router重新路由到当前页面，页面是不进行刷新的

（2）采用window.reload( )，或者router.go（0）刷新时，整个浏览器进行了重新加载，闪烁，体验不好

3.解决方法

provide/ iniect 组合

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

App.vue:

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

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

<script>
export default {
  name: 'app',
  provide () {
    return {
      reload: this.reload
    }
  },
  data () {
    return {
      isRouterAlive: true
    }
  },
  methods: {
    reload () {
      this.isRouterAlive = false
      this.$nextTick(function () {
        this.isRouterAlive = true
      })
    }
  }
}
</script>

<style lang="scss">
@import url("./assets/style/App.scss");
</style>

tableList.vue：（子组件）

在页面上注入App.vue组件提供（provide）的reload依赖，在逻辑上完成之后（删除或者添加），直接this.reload（）调用，即可刷新当前页面。

引入：

export default {
  name: 'index',
  components: {
    Tabs,
    TabPane,
    Menu,
    Label
  },
  iniect:['reload'],  //注入reload方法
｝

　在方法内调用：

 addSet: function (response) {
      if (response.code=== 0) {
         this.reload （）  //直接调用
      }
    },

4.provide / inject 用法：

provide：选项应该是在一个对象或者返回一个对象的函数。该对象包含可注入其子孙的属性。

inject：一个字符串数组，或者一个对象，对象的key是本地的绑定名

提示：

provide 和 inject 绑定并不是可响应的，这是可以为之的。如果你传入了一个可监听的对象，那么对象的实行还是可响应的！

vue如何刷新当前页面

猜你喜欢