美文网首页
前端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