vue-cli項目中如何實現局部頁面的刷新？

功能需求講解：
　　在vue-cli項目中,一般會去刷新頁面，通常咱們比較暴力的刷新頁面的方法爲location. reload()，直接將整個頁面進行了刷新，

這種方法雖然也達到了效果，可是用戶體驗卻不是很好，咱們要的效果只是將當前頁面進行刷新。

這裏推薦使用provide / inject 組合的方法來進行局部頁面來進行刷新

具體實現步驟以下：
1、在App.vue頁面中定義刷新的方法

2、在使用的頁面中進行調用

 

具體代碼以下

App.vue代碼

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

<script>
export default {
  name: 'App',
  provide () {
    return {
      reload: this.reload
    }
  },
  data () {
    return {
      isRouterAlive: true
    }
  },
  mounted () {

  },
  methods: {
    reload () {
      this.isRouterAlive = false
      this.$nextTick(function () {
        this.isRouterAlive = true
      })
    }
  }
}
</script>

使用的子頁面代碼

<template>
  <div class="shop">
      <button @click="re">123</button>
  </div>
</template>

<script>
export default {
  name: 'shop',
  inject: ['reload'],
  data () {
    return {

    }
  },
  mounted () {
    console.log('從新加載了當前頁面')
  },
  methods: {
    re () {
      this.reload()
    }
  }
}
</script>

這樣就實現了局部刷新頁面的效果，能夠在定義的方法中加入加載動畫，加強用戶體驗。