在做项目的过程中会遇到很多需要重新刷新页面的地方,比如说弹出的登陆框,在登陆成功后要关闭弹窗,并且刷新页面,那么,有哪几种好用的方式来进行页面的刷新呢。

第一种,就是是新建一个空白的页面,跳转到改页面,然后再立马跳转回原页面,但是这个方式很显然不能达到很好的用户体验。

第二种,可以使用跳转路由的方式,给go的参数传0可以实现在本页面跳转本页面,实现刷新。

this.$router.go(0)

第三种,这种是比较方便的一种方法,直接上代码:

在App.vue文件:

这种方法是通过控制router-view的显示与隐藏重新加载实现刷新

<template>
  <div id="app">
    <router-view v-if="isRouterAlive" />
  </div>
</template>
export default {
  name: "App",
  provide () {
    // 父组件中通过provide来提供变量,在子组件中通过inject来注入。
    return {
      reload: this.reload
    };
  },
  methods: {
    reload () {
      this.isRouterAlive = false;
      this.$nextTick(function () {
        this.isRouterAlive = true;
      });
    }
  }
};

在需要用到的组件中注入

export default {
  inject: ["reload"],
   methods:{
    getList(){
    //直接使用
        this.reload()
    }
}
}

这样直接调用就可以实现刷新页面

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐