Vue刷新当前页面

App.vue注入以下代码,以下所示:

<template>
  <div id="app">
    <router-view v-if="isRouterAlive"/>
    <!-- Vue项目中刷新当前页面:v-if="isRouterAlive" -->
  </div>
</template>
<script>

  import NavMenu from '@/components/common/NavMenu'

  export default {
    name: 'App',
    components: {NavMenu},
    // Vue项目中刷新当前页面【开始】 ,以下这些是刷新页面所需的代码
    provide () {
      return {
        reload: this.reload
      }
    },
    data () {
      return {
        isRouterAlive: true
      }
    },
     methods: {
      reload () {
        this.isRouterAlive = false
        this.$nextTick(function () {
          this.isRouterAlive = true
        })
      }
    }
     // Vue项目中刷新当前页面【结束】
  }
</script>

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    /*margin-top: 10px;*/
  }
</style>

在需要手动刷新的页面引入reload,如下所示:

 inject: ['reload'], // 注入依赖   Vue项目中刷新当前页面

调用刷新reload方法:

 this.reload()
posted @ 2020-11-28 21:48  sailorj  阅读(182)  评论(0)    收藏  举报