vue2页面刷新

一、直接调用源生js方法刷新页面

window.location.reload()

二、使用vue路由跳转刷新页面

this.$router.go(0)

三、使用provide和inject

        在App.vue主组件中定义刷新页面方法，在需要刷新的页面中调用

App.vue组件

<template>
	<div>
		<router-view v-if="show" />
	</div>
</template>
<script>
export default {
    data(){
        return{
            show:true
              }

    },
    provide() {
		return {
			reload: this.reload
		}
	},
    method:{
        	// 高阶组件定义刷新方法
		reload() {
			this.show = false
			this.$nextTick(() => {
				this.show = true
			})
		},

    }
}
</script>

需要刷新页面的组件

<script>
    export default {
        data(){},
        inject: ['reload'],
        methods: {
		    sxb() {
			console.log('刷新')
			this.reload()
		},
    }

</script>

注意：

        方法一和方法二为强制刷新页面，页面会出现空白，用户体验感不好；方法三为普通刷新，不会出现空白