Vue实现页面的局部刷新(router-view页面刷新)

发布时间:2022-04-16 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了Vue实现页面的局部刷新(router-view页面刷新)脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

利用Vue里面的PRovide+inject组合

首先需要修改App.vue。

<template>
  <!-- 公司管理 -->
  <div class="companyManage">
    <router-view v-if="isRouterAlive"></router-view>
  </div>
</template>

<script>
export default {
  name: "companyManage",
  watch: {},
  provide() {
    return {
      reload:this.reload
    }
  },
  data() {
    return {
      isRouterAlive:true
    };
  },
  methods: {
    reload() {
      this.isRouterAlive = false;
      this.$nextTick( () => {
        this.isRouterAlive = true;
      })
    }
  },
  mounted() {}
};
</script>

<style scoPEd>
.COMpanyManage {
  width: 100%;
  height: 100%;
  posITion: relative;
  background: #fff;
}
</style>

在这里插入图片描述

2. 到需要刷新的页面进行引用,使用inject导入引用reload,然后直接调用即可。

在这里插入图片描述

inject:["reload"],
this.reload();

在这里插入图片描述

到此这篇关于Vue实现页面的局部刷新(router-view页面刷新)的文章就介绍到这了,更多相关Vue 页面局部刷新内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典!

您可能感兴趣的文章:

脚本宝典总结

以上是脚本宝典为你收集整理的Vue实现页面的局部刷新(router-view页面刷新)全部内容,希望文章能够帮你解决Vue实现页面的局部刷新(router-view页面刷新)所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。