vue项目如何刷新当前页面

女爷i 2022-12-08 14:14 214阅读 0赞

> 最近开发了自定义的表单，作为dialog的形式存在在表格同页面的部分，表单提交后，我会吧相关的dialog弹框关闭，但是列表数据并没有进行相关的加载，但是我又不想window.refresh，出现空白页面，就找到了下面这个方法

### 1、course-list.vue 页面进行注册对应的add 组件 ###

<el-dialog title="创新课程"
                       width="97%"
                       top=2vh
                       :append-to-body=true
                       :visible.sync="box"
                       center>
                <courseAdd ref="courseAdd"  @hideDialog="hideDialog"></courseAdd>
            </el-dialog>

展示的层级关系如图，dialog下面是对应的课程列表

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1Mjc1MjMz_size_16_color_FFFFFF_t_70][]

### 2、需要在App.vue如下处理 ###

<template>
      <div id="app">
          <router-view v-if="isRouterAlive"></router-view>
      </div>
    </template>
    
    <script>
    export default {
      name: "app",
      provide () {
        return {
            reload: this.reload
        }
      },
      data() {
        return {
            isRouterAlive: true
        };
      },
      watch: {},
      created() {
    
      },
      methods: {
          reload(){
              this.isRouterAlive = false
              this.$nextTick(function () {
                 this.isRouterAlive = true
              })
          }
      },
      computed: {}
    };
    </script>
    <style lang="scss">
    #app {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    </style>

### 3、在course-add.vue 页面（对应courseAdd模块） ###

>     inject: ['reload']

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1Mjc1MjMz_size_16_color_FFFFFF_t_70 1][]

在提交表单处引入this.reload();即可

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1Mjc1MjMz_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1Mjc1MjMz_size_16_color_FFFFFF_t_70]: /images/20221123/d76db54a66dd4ae08b00685c3e58e2f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1Mjc1MjMz_size_16_color_FFFFFF_t_70 1]: /images/20221123/b361db1f511f40609c0537053984c273.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1Mjc1MjMz_size_16_color_FFFFFF_t_70 2]: /images/20221123/a57fae31af144273be47d3ed66a7c582.png