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

 更新时间:2021-12-31 07:29:59   作者:佚名   我要评论(0)


利用Vue里面的provide+inject组合

首先需要修改App.vue。


<template>
<!-- 公司管理 -->
<div class="companyManage">
<router-

利用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实现局部刷新的实现示例

相关文章

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

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

    利用Vue里面的provide+inject组合 首先需要修改App.vue。 <template> <!-- 公司管理 --> <div class="companyManage"> <router-
    2021-12-31
  • oracle中commit之后进行数据回滚的方法

    oracle中commit之后进行数据回滚的方法

    commit之后 第一种: 记住大概的时间,获取前大概时间的数据。 select * from Test as of timestamp to_timestamp('2021-12-08 09:30:56',
    2021-12-31
  • vue 中使用 bimface详情

    vue 中使用 bimface详情

    目录1. 安装 vue 脚手架2. 创建项目3. 引入 bimface 文件3.1 运行项目 3.2 引入 bimface 文件 4. 实现页面渲染4.1 修改 html 4.2 修改 CS
    2021-12-31
  • 关于SpringBoot使用@Async的总结

    关于SpringBoot使用@Async的总结

    目录SpringBoot使用@Async总结如下方式会使@Async失效SpringBoot实现异步(Async)接口1. 启动类引入@EnableAsync注解2. 建立异步任务类3. 建立
    2021-12-28
  • 强制去除Unity自动添加的Android隐私权限

    强制去除Unity自动添加的Android隐私权限

    提审Google Play会遇到隐私权限的问题,最好把非必要隐私权限清理干净。GF框架DebugComponent组件中涉及Input.location API调用,Unity打包时
    2021-12-28
  • JavaScript实现语音排队叫号系统

    JavaScript实现语音排队叫号系统

    目录介绍主要功能效果展示关键代码介绍 语音排队叫号系统广泛用于银行,餐饮,医院等场景。本系统采用Layui框架完成,前端体验不错,基于角色
    2021-12-28
  • vue+elementUI实现内嵌table的方法示例

    vue+elementUI实现内嵌table的方法示例

    在大四实习工作中碰到一个比较特别的需求,要求在一个 table 表格中点击一条数据的编号,在该条数据下方出现一个新的 table 表格。这个需求
    2021-12-28
  • idea中lombok的用法

    idea中lombok的用法

    IntelliJ IDEA是一款非常优秀的集成开发工具,功能强大,而且插件众多。lombok是开源的代码生成库,是一款非常实用的小工具,我们在编辑实体
    2021-12-28
  • 微信小程序虚拟列表的应用实例

    微信小程序虚拟列表的应用实例

    目录前言什么是虚拟列表?demo效果准备工作屏高&盒子高度优化总结前言 股票热门榜单有4000多条,渲染到页面上在盘中时还得实时更新,如果采用
    2021-12-28
  • centos7修改网卡后无法上网问题解决过程

    centos7修改网卡后无法上网问题解决过程

    ping www.baidu.com未知的域名 修改主机ip地址 右键属性 选属性 这个选项原来是自动获取的,可能会在后续发生改变,因此选固定的ip。这个i
    2021-12-28

最新评论