VUE实现局部刷新

VUE实现局部刷新

可以使用2.2.0 新增的provide / inject控制的显示隐藏

在App.vue文件中添加以下coding：

<div id="app">
	<router-view v-if="isRouterAlive"/>
</div>
<script>
	export default {
		name: 'App',
		data () {
			return {
				isRouterAlive: true
			}
		},
		provide () {
			return {
				reload: this.reload
			}
		},
		methods: {
			this.isRouterAlive = false
			this.$nextTick(() => {
				this.isRouterAlive = true
			})
		}
	}
<script/>

在使用局部刷新的组件中

<script>
  export default {
    name: 'Component',
    data () {
      return {}
    },
    inject: ['reload'],  // 注入
    methods: {
      callBack(){
        // ...
        this.reload() //局部刷新
      }
    }
  }
</script>

拓展
其他页面刷新方法：
1.window.location.reload() //有白屏
2.this.$router.go(0) //有白屏