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 页面局部刷新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了使用Vant完成Dialog弹框案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
在数据可视化应用中,需要将数据动态加载到图表中并进行实时更新,本文将展示如何使用Plotly.js和Vue.js实现这一功能,从加载外部数据到创建交互式图表,文中有相关的代码示例供大家参考,需要的朋友可以参考下2024-06-06
这篇文章主要给大家介绍了关于Vue如何在CSS中使用data定义的数据的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下2022-05-05
vue3.0使用mapState,mapGetters和mapActions的方式
这篇文章主要介绍了vue3.0使用mapState,mapGetters和mapActions的方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
可以使用props将父组件的数据传给子组件。子组件在接受数据时要显示声明props。下面通过一个例子给大家介绍Vue中父组件向子组件通信的方法，需要的朋友参考下吧2017-07-07
这篇文章主要介绍了vue使用Print.js打印页面样式不出现的解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了vue路由传参 router-link和编程式传参方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要介绍了Vue3中动态获取高宽,实现思路大概是将监听到的高度赋给你需要设置的对象，本文通过实例代码给大家介绍的非常详细，需要的朋友一起看看吧2023-10-10
这篇文章主要介绍了vue + qiankun 项目搭建,首先是通过cli3构建vue2项目，通过qiankun改造主应用，本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-03-03
这篇文章主要介绍了Vue中使用Echarts仪表盘展示实时数据的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-11-11
最新评论