耀极客论坛

 找回密码
 立即注册
查看: 507|回复: 0

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

[复制链接]

193

主题

176

帖子

276

积分

中级会员

Rank: 3Rank: 3

积分
276
发表于 2022-5-7 01:30:21 | 显示全部楼层 |阅读模式
  本文主要介绍了Vue实现页面的局部刷新(router-view页面刷新),文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  1. 利用Vue里面的provide+inject组合
复制代码
  首先需要修改App.vue。
  1. ‹template>
  2.   ‹!-- 公司管理 -->
  3.   ‹div class="companyManage">
  4.     ‹router-view v-if="isRouterAlive">‹/router-view>
  5.   ‹/div>
  6. ‹/template>
  7. ‹script>
  8. export default {
  9.   name: "companyManage",
  10.   watch: {},
  11.   provide() {
  12.     return {
  13.       reload:this.reload
  14.     }
  15.   },
  16.   data() {
  17.     return {
  18.       isRouterAlive:true
  19.     };
  20.   },
  21.   methods: {
  22.     reload() {
  23.       this.isRouterAlive = false;
  24.       this.$nextTick( () => {
  25.         this.isRouterAlive = true;
  26.       })
  27.     }
  28.   },
  29.   mounted() {}
  30. };
  31. ‹/script>
  32. ‹style scoped>
  33. .companyManage {
  34.   width: 100%;
  35.   height: 100%;
  36.   position: relative;
  37.   background: #fff;
  38. }
  39. ‹/style>
复制代码


  2. 到需要刷新的页面进行引用,使用inject导入引用reload,然后直接调用即可。

  1. inject:["reload"],
  2. this.reload();
复制代码

  到此这篇关于Vue实现页面的局部刷新(router-view页面刷新)的文章就介绍到这了,更多相关Vue 页面局部刷新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-11-28 20:01 , Processed in 0.081054 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表