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

深碍√TFBOYSˉ_ 2023-06-13 09:32 6阅读 0赞

返回上一页很简单，只需要加上@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']

效果图：

![20191115154358446.png][]

[20191115154358446.png]: https://img-blog.csdnimg.cn/20191115154358446.png