Vue刷新组件,页面刷新

通过:provide / inject 方式实现!

Home.vue

<keep-alive :include="tagsList" v-if="showView">
     <router-view></router-view>
</keep-alive>


 <script>
export default {
    provide(){
        return {
            refreshView:this.refreshView
        }
    },
    data() {
        return {
            showView: true // 用于点击当前页的router时，刷新当前页
        };
    },
    methods:{
        refreshView () {

            this.showView = false // 通过v-if移除router-view节点
            this.$nextTick(() => {
                this.showView = true // DOM更新后再通过v-if添加router-view节点
            })
             
        }
    }
    </script>

在组件中使用:

<span @click="refresh">刷新</span>

<script>
    export default {
        inject:['refreshView'],
          methods:{
            refresh(){
                this.refreshView()
            }
        }
    };
</script>