新手:Vue 刷新当前页面

vue前端 专栏收录该内容
9 篇文章 1 订阅

采用window.reload(),或者router.go(0)刷新时,整个浏览器进行了重新加载,闪烁,体验不好,在vue中可以使用provide/inject组合,允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。
在App.vue组件中的代码:

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

在其他组件中使用:

<template>
 <el-tooltip effect="dark" content="刷新" placement="bottom-start">
            <el-button class="el-icon-refresh" type="primary" size="small" @click="refresh"></el-button>
</el-tooltip>
</template>
<script>
export default {
    name: 'datafilemanage',
    inject: ['reload'],
   methods:{
	  refresh() {
	           this.reload()
	   }
   }
 }

这样在其他组件中点击刷新按钮时,就会刷新当前页面。

  • 2
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值