美文网首页
前端vue中如何让界面进行刷新一次

前端vue中如何让界面进行刷新一次

作者: 喜欢走弯路的人 | 来源:发表于2022-08-30 10:37 被阅读0次

方法一:

会出现一段空白页,用户体验不好,且直接在vue界面调用的话会进行刷新死循环

this.$router.go(0) 

方法二: 

会出现一段空白页,用户体验不好,且直接在vue界面调用的话会进行刷新死循环

window.location.reload()

方法三:

会出现一段空白页,只刷新一次

if (window.location.href.indexOf("#reloaded") == -1) {

        window.location.href = window.location.href + "#reloaded";

        window.location.reload();

   }

方法四:刷新不会出现空白页面

1、在app.vue中定义reload()方法

<template>

  <div id="app">

    <router-view v-if="isReload"/>

  </div>

</template>

<script>

export default {

  name: 'App',

  provide() {

    return {

      reload: this.reload

    }

  },

  data() {

    return {

      isReload: true

    }

  },

  methods: {

    reload() {

      this.isReload = false

      this.$nextTick(() => {

        this.isReload = true

      })

    }

  }

}

</script>

2、在需要强制刷新的页面引用

<script>

export default {

  inject: ['reload'],

  methods: {

    clickReload() { // 点击之后强制刷新

       this.reload()

     }

  }

}

</script>

相关文章

网友评论

      本文标题:前端vue中如何让界面进行刷新一次

      本文链接:https://www.haomeiwen.com/subject/escdnrtx.html