返回上一页很简单,只需要加上@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']
效果图: