100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > vue实现刷新当前页和返回上一页

vue实现刷新当前页和返回上一页

时间:2021-04-14 19:40:42

相关推荐

vue实现刷新当前页和返回上一页

返回上一页很简单,只需要加上@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 = falsethis.$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']

效果图:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。