Vue 实现页面刷新, 体验较好


原理: 通过v-if来渲染<router-view>

provide: 选项应该是在一个对象或者返回一个对象的函数。该对象包含可注入其子孙的属性

inject: 一个字符串数组,或者一个对象,对象的key是本地的绑定名


App.vue添加provide属性

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

<script>
export default {
  name: 'app',
  provide () {
    return {
      pageReload: this.pageReload
    }
  },
  data () {
    return {
      isRouterAlive: true
    }
  },
  methods: {
    pageReload () {
      this.isRouterAlive = false
      this.$nextTick(function () {
        this.isRouterAlive = true
      })
    }
  }
}
</script>

子组件inject引用父组件的属性

export default {
  name: 'childTemplate',
  inject: ['pageReload'],
  methods: {
    reloadFun () {
      this.pageReload() // 调用
    }
  }
}

声明:Jensonhui's blog|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - Vue 实现页面刷新, 体验较好


Just do it.