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 = 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']

效果图：