脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue 页面局部刷新

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

 更新时间：2021年12月30日 16:12:40   作者：小城听风雨  
本文主要介绍了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中多附件上传的实现示例

    vue中多附件上传的实现示例

    这篇文章主要介绍了vue中多附件上传的实现示例，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下
    2021-04-04
  • vue中多个倒计时实现代码实例

    vue中多个倒计时实现代码实例

    这篇文章主要介绍了vue中多个倒计时实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • element基于el-form智能的FormSmart表单组件

    element基于el-form智能的FormSmart表单组件

    本文主要介绍了element基于el-form智能的FormSmart表单组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • vue中使用geobuf的示例详解

    vue中使用geobuf的示例详解

    这篇文章主要介绍了vue中使用geobuf的示例详细，本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-04-04
  • 详解vue-cil和webpack中本地静态图片的路径问题解决方案

    详解vue-cil和webpack中本地静态图片的路径问题解决方案

    这篇文章主要介绍了详解vue-cil和webpack中本地静态图片的路径问题解决方案，非常具有实用价值，需要的朋友可以参考下
    2017-09-09
  • 利用Vite2和Vue3实现网站国际化的全过程

    利用Vite2和Vue3实现网站国际化的全过程

    vite2已经出来一段时间了,最近没忍住尝试了一下,这篇文章主要给大家介绍了关于利用Vite2和Vue3实现网站国际化的相关资料,需要的朋友可以参考下
    2021-08-08
  • Vue项目打包后可修改基础接口地址配置的具体操作

    Vue项目打包后可修改基础接口地址配置的具体操作

    vue项目打包过后发现地址错了或者发布到别的服务器发现请求的地址不对,每次都要去重新打包,太浪费时间,下面这篇文章主要给大家介绍了关于Vue项目打包后可修改基础接口地址配置的具体操作,需要的朋友可以参考下
    2022-08-08
  • 如何为老vue项目添加vite支持详解

    如何为老vue项目添加vite支持详解

    Vite是一个开发环境工具，旨在提高我们的开发速度,下面这篇文章主要给大家介绍了关于如何为老vue项目添加vite支持的相关资料,需要的朋友可以参考下
    2021-09-09
  • vue踩坑记之npm install报错问题解决总结

    vue踩坑记之npm install报错问题解决总结

    当你跑起一个项目的时候,第一步需要先安装依赖npm install,下面这篇文章主要给大家介绍了关于vue踩坑之npm install报错问题解决的相关资料,需要的朋友可以参考下
    2022-06-06
  • 基于Vue3+WebSocket实现实时文件传输监控系统

    基于Vue3+WebSocket实现实时文件传输监控系统

    WebSocket是一种在客户端和服务器之间进行双向通信的网络协议,它通过建立持久性的、全双工的连接,允许服务器主动向客户端发送数据,本文小编给大家介绍了基于Vue3+WebSocket实现实时文件传输监控系统,需要的朋友可以参考下
    2025-03-03

最新评论