Vue-Elementui 实现局部网页刷新

方法一:使用2.2.0 新增的provide / inject控制的显示隐藏

在App.vue中使用provide

//App.vue
<template>
    <div>
        <router-view v-if="isRouterAlive"></router-view>
    </div>
</template>

<script>
    export default {
        name: 'App',
        data () {
            return {
                isRouterAlive: true
            }
        },
        provide(){ //提供
            return {
                reload: this.reload
            }
        },
        methods: {
            reload(){
                this.isRouterAlive = false
                this.$nextTick( function () {
                    this.isRouterAlive = true
                })
            }
        }
    }
</script>

在使用局部刷新的组件中使用inject

<script>
    export default {
        name: 'index',
        data () {
            return {}
        },
        inject: ['reload'], //注入
        methods: {
            fresh(){
                this.reload() //局部刷新
            }
        }
    }
</script>
方法二:直接在方法里调用 “location. reload()” , 缺点:有白屏
/*刷新网页*/
      fresh(){
       location. reload()
      },
方法三:直接在方法里调用 “this.$router.go(0)” , 缺点:有白屏
/*刷新网页*/
      fresh(){
		this.$router.go(0)
      },
Logo

前往低代码交流专区

更多推荐