欢迎来到代码驿站!

vue

当前位置:首页 > 网页前端 > vue

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

时间:2022-02-20 09:27:20|栏目:vue|点击:

利用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 + element动态多表头与动态插槽

栏    目:vue

下一篇:Vue使用el-tree 懒加载进行增删改查功能的实现

本文标题:Vue实现页面的局部刷新(router-view页面刷新)

本文地址:http://www.codeinn.net/misctech/194017.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有