vue实现刷新当前页和返回上一页
返回上一页很简单,只需要加上@click="$router.back()"即可。刷新当前页,首先在app.vue的加上v-if属性<router-view v-if="isRouterAlive"></router-view>在data里面加上isRouterAlive,当然这个属性名可以自己定义,默认值为truedata () {...
·
返回上一页很简单,只需要加上@click="$router.back()"即可。
刷新当前页,首先在app.vue的加上v-if属性
<router-view v-if="isRouterAlive"></router-view>
在data里面加上isRouterAlive,当然这个属性名可以自己定义,默认值为true
data () {
return {
isRouterAlive: true
}
}
methods里面加入一个刷新的方法
methods: {
reload () {
this.isRouterAlive = false
this.$nextTick(function() {
this.isRouterAlive = true
})
}
}
最后,需要把这个函数 provide 出去
provide () {
return {
reload: this.reload
}
}
这样,app.vue上就设置完了 那么当我们需要刷新的时候,在需要的页面上加上这个函数就可以了
首先注入这个函数
inject: ['reload']
然后在需要用到这个函数的地方去引用就行了
refresh () {
this.reload()
}
这样子就可以刷新页面了,而且不会出现白屏的情况,推荐使用。
demo:
<el-header class="home-header">
<div style="display: flex;align-items: center;margin-right: 7px">
<span @click="$router.back()" title="返回上一页" class="el-dropdown-link home_userinfo" style="display: flex;align-items: center;width: 110px">
<i class="el-icon-back">返回上一页</i>
</span>
<span @click="reloadFn" title="刷新" class="el-dropdown-link home_userinfo" style="display: flex;align-items: center;width: 70px">
<i class="el-icon-refresh">刷新</i>
</span>
</div>
</el-header>
methods: {
reloadFn () {
this.reload()
}
},
inject: ['reload']
效果图:
更多推荐
已为社区贡献8条内容
所有评论(0)