vue项目刷新当前页面最优解决方式

一般刷新页面可以用location.reload(true),history.go(0) 等方法,但是这对vue项目很不友好,会是页面重新加载,出现暂时性的空白,而且耗费性能,所以vue项目最好不用这些方法.vue有this.$forceUpdate()可以强制更新,下面介绍其他2种更好的方法.

方法一:带上当前页面路由跳转到一个重定向的页面,重定向页面再跳转回来. 

新建refresh.vue

<script>
export default {
  name: "refresh",
  beforeCreate(){
    this.$router.push(this.$route.query.path)
  },
};
</script>

router.js配置一个refresh路由

import refresh from './components/refresh.vue'

 
{
	path: '/refresh',
	name: 'refresh',
	component: refresh
},

在要刷新的地方跳转传参即可

    reflesh(){
      this.$router.push({path:'/refresh',query:{path:this.$route.fullPath}})
    },

方法二:通过v-if或者设置组件的key值触发页面刷新,结合provide和inject

修改app.vue,利用v-if可以刷新页面的功能,同时使用provide和inject将祖先节点的数据传递给子代节点

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

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

或 组件的key值改变会使vue页面重新刷新

<template>
  <div id="app" :key="key">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  provide () {
    return {
      reload: this.reload
    }
  },
  data () {
    return {
      key: 1
    }
  },
  methods: {
    reload () {
      this.key++
    }
  }
}
</script>

 

在要刷新的子路由页面引入inject,然后执行reload事件即可刷新页面

export default {
  name: "demo",
  inject:['reload'],
  data() {
    return {
      
    }
  },
  methods: {
    reflesh(){
      this.reload()
    },
  }
}

 

对比:

方法一有一个小问题是点击浏览器返回相当于没点击,因为跳转的是refresh页面,尔refresh又会跳回原页面.

方法二就没有上述问题,所以个人更推荐方法二