Vue刷新页面的三种方式

2022年12月10日10:58:57

1.原生的js刷新方式:

location.reload();

2.vue自带的路由跳转方式:

this.$router.go(0);

使用过后发现这俩种方式都会使页面有短暂的空白,体验效果不是特别好所以总结出了第三种方式
3. 在app或者路由插槽处声明以下代码:

template>
    <div id="app">
    	<router-view v-if="isShow"></router-view>
	</div>
</template>
<script>
    export default {
        name: 'App',
        provide () {
        //父组件中通过provide来提供变量,在子组件中通过inject接受。                                             
            return {
                reload: this.reload                                              
            }
        },
        data() {
            return{
            //自定义参数
                isShow: true
            }
        },
        methods: {
            reload () {
            //reload方法首先将isShow设置为false,将router-view通过if判断取消
                this.isShow= false;
            // Vue.nextTick用于延迟执行一段代码,它接受2个参数(回调函数和执行回调函数的上下文环境),如果没有提供回调函数,那么将返回promise对象。
                this.$nextTick(function () {
           //     在页面更新后再将isShow设置为true
                    this.isShow= true;
                }) 
            }
        },
    }
</script>

组件中设置刷新

export default {
    inject:['reload'],//  此处引入在app中定义的reload方法
    data () {
        return {
        }
    }
},

在页面中需要页面刷新的地方调用即可

this.reload();

  • 作者:weixin_45093753
  • 原文链接:https://blog.csdn.net/weixin_45093753/article/details/119884590
    更新时间:2022年12月10日10:58:57 ,共 702 字。