关于vue刷新当前页的方法比较

写项目的时候，遇到这样一个场景：当用户处于登录状态点击退出登录的时候要刷新当前页，重置登录状态。那么，在vue中如何做到刷新当前页呢？

方法一

首先想到的是vueRouter,当点击退出登录时路由跳转到当前页


   在当前页(路由path为:  ‘/’  )写上：

methods: {
    offLogin () {
        this.$router.push({ path: '/' });
    }
}

但是效果却不是我们想要的:

登录状态的确刷新了，但是页面却没有实现刷新的效果，体验感贼差(* _ *)

方法二

  利用浏览器自带的方法：采用window.location.reload()，或者vueRouter中的this.$router.go(0)
但是你会发现一刷新，整个浏览器进行了重新加载，出现一瞬间的白屏，体验也不好(* . *)

方法三

  采用vue中很少使用功能却十分强大的一对APIprovide、inject，配合vue Router就能实现刷新当前页体验又比较舒服的效果了。(* ^_ *)。


  直接上代码:

App.vue

<template>
  <div id="app">
    <router-view v-if="isReloadAlive" />
  </div>
</template>

<script>
export default {
  name: 'App',
  provide () { // 实现页面刷新
    return {
      reload: this.reload
    }
  },
  data () {
    return {
      isReloadAlive: true
    }
  },
  methods: {
    reload () {
      this.isReloadAlive = false;
      this.$nextTick(() => {
        this.isReloadAlive = true
      });
    }
  }
}
</script>

  当前页:

login.vue

export default {
    inject: ['reload'],
    methods: {
        offLogin () {
            this.reload();
        }
    }
}

效果如下：

  记得前端大佬说过:就前端而言，越是用的少的东西，越是功能强大，官方不推荐使用，不是它没什么用,而是怕你用不好。所以还是大胆用吧！哈哈