阅读 1225

关于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();
        }
    }
}

复制代码

效果如下:

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

文章分类
前端
文章标签