本网站可以出售:只需60000元直接拥有。QQ:939804642
您当前的位置:首页 > 网站建设 > javascript
| php | asp | css | H5 | javascript | Mysql | Dreamweaver | Delphi | 网站维护 | 帝国cms | React | 考试系统 | ajax | jQuery | 小程序 |

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

51自学网 2022-02-21 13:34:50
  javascript

利用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 页面局部刷新内容请搜索51zixue.net以前的文章或继续浏览下面的相关文章希望大家以后多多支持51zixue.net!


下载地址:
JS截取字符串的三种方法详解
vue
51自学网自学EXCEL、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。
京ICP备13026421号-1