Vue实现页面的局部刷新（router-view页面刷新）

港控/mmm° 2022-12-22 11:23 386阅读 0赞

[https://blog.csdn.net/a5252145/article/details/102745598?utm\_medium=distribute.pc\_relevant\_t0.none-task-blog-BlogCommendFromBaidu-1.control&depth\_1-utm\_source=distribute.pc\_relevant\_t0.none-task-blog-BlogCommendFromBaidu-1.control][https_blog.csdn.net_a5252145_article_details_102745598_utm_medium_distribute.pc_relevant_t0.none-task-blog-BlogCommendFromBaidu-1.control_depth_1-utm_source_distribute.pc_relevant_t0.none-task-blog-BlogCommendFromBaidu-1.control]

## Vue实现页面的局部刷新（router-view页面刷新） ##

> 利用Vue里面的`provide+inject`组合

1.  首先需要修改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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E1MjUyMTQ1_size_16_color_FFFFFF_t_70]

2. 到需要刷新的页面进行引用，使用inject导入引用reload，然后直接调用即可。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E1MjUyMTQ1_size_16_color_FFFFFF_t_70 1]

inject:["reload"],
    this.reload();

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E1MjUyMTQ1_size_16_color_FFFFFF_t_70 2]

[https_blog.csdn.net_a5252145_article_details_102745598_utm_medium_distribute.pc_relevant_t0.none-task-blog-BlogCommendFromBaidu-1.control_depth_1-utm_source_distribute.pc_relevant_t0.none-task-blog-BlogCommendFromBaidu-1.control]: https://blog.csdn.net/a5252145/article/details/102745598?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromBaidu-1.control&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromBaidu-1.control
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E1MjUyMTQ1_size_16_color_FFFFFF_t_70]: /images/20221120/f2d13a454a984ef98480d3ef1fb582bd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E1MjUyMTQ1_size_16_color_FFFFFF_t_70 1]: /images/20221120/a30e9315dac8476c9490329451cfc341.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E1MjUyMTQ1_size_16_color_FFFFFF_t_70 2]: /images/20221120/9a8a10cbdad845d98e82db0a20eab7e9.png