vue如何组件强制刷新组件

Posted 2021-09-07 奥特曼　

之前没遇到过直接强制刷新组件的，都是通过ajax数据回来 重新请求更一下页面，面试题遇到了还是总结一下

一、 强制刷新

  this.$router.go(0)

  this.$router.go( ) 如果未向该函数传参或delta相等于0，则该函数与调用location.reload()具有相同的效果。 

location.reload()

Location.reload() 方法用来刷新当前页面。该方法只有一个参数，当值为 true 时，将强制浏览器从服务器加载页面资源，当值为 false 或者未传参时，浏览器则可能从缓存中读取页面。

缺点：会有短时间的空白页面

二、路由跳转

思路 跳转到一个新的空白页路由 在跳转回来

1页面

  methods: {
    refresh () {
      this.$router.replace({
        path: '/test'
      })
    }
  }

2页面

  created () {
    this.$router.replace({
      path: '/about'
    })
  }

路由会有一个切换的过程 但是看不出来

三、provide、inject

切换路由出口  通过子孙组件调用事件进行销毁创建的切换

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view v-if="isReload"/>
  </div>
</template>
<script>
export default {
  provide () {
    return {
      reload: this.reload
    }
  },
  data () {
    return {
      isReload: true
    }
  },
  methods: {
    reload () {
      this.isReload = false
      this.$nextTick(() => {
        this.isReload = true
      })
    }
  }
}
</script>

about.vue

<script>
export default {
  inject: ['reload'],
  data () {
    return {
      num: 123
    }
  },

  methods: {
    refresh () {
      this.reload()
    }
  }
}
</script>