Vue刷新当前页面或组件

利用v-if控制router-view，在根组件APP.vue中实现一个刷新方法，然后通过provide/inject方式调用。

1、修改APP.vue，通过声明reload方法，控制router-view的显示或隐藏，从而控制页面的再次加载，这边定义了isRouterAlive来控制

<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
    }
  },
  methods: {
    reload () {
      this.isRouterAlive = false
      this.$nextTick(function () {
        this.isRouterAlive = true
      })
    }
  }
}
</script>

2、在需要刷新的页面中注入(inject)在App.vue组件提供(provide)的reload依赖，然后直接使用this.reload()调用即可

export default {
  inject: ['reload'], // 注入依赖
  name: 'country',
  data () {
    countryCode: '',
    countryList: []
  },
  methods: {
    changeCountry () {
      switch (this.countryCode) {
        case 'other':
          $('#country_name')[0].disabled = false
          break
        default:
          $('#country_name')[0].disabled = true
          this.reload() // 刷新页面
          break
      }
    }
  }
}
</script>