vue項目刷新當前頁面最優解決方式

一般刷新頁面可以用location.reload(true),history.go(0) 等方法,但是這對vue項目很不友好,會是頁面重新加載,出現暫時性的空白,而且耗費性能,所以vue項目最好不用這些方法,下面介紹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的功能觸發頁面刷新,結合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>

在要刷新的子路由頁面引入inject,然後執行reload事件即可刷新頁面

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

 

對比:

方法一有一個小問題是點擊瀏覽器返回相當於沒點擊,因爲跳轉的是refresh頁面,爾refresh又會跳回原頁面.

方法二就沒有上述問題,所以個人更推薦方法二