Vue 编辑、新增同页面，关闭编辑窗口，打开新增页 有缓存

新增和编辑共用同一个页面，关闭对话框 设置了重置表单，但当点击【编辑】-取消弹窗-再点击【新增】，此时显示的是编辑页面的内容，刷新浏览器后才置空

此前设置的重置表单无效，故强制刷新浏览器达到目的。

强制 刷新浏览器 方法：

1、 this.$router.go(0)
2、 location.reload()
3、 provide  inject

APP

// APP

<template>
  <div id="app">
    <router-view v-if="isReload" />
  </div>
</template>

<script>
export default {
  name: 'App',

  provide() {
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      isReload: true
    }
  },
  methods: {
    reload() {
      this.isReload = false
      this.$nextTick(() => {
        this.isReload = true
      })
    }
  }

}
</script>

// 父组件：
    <add-role
      :dialog-visible="dialogVisible"
      :user-id="userId"
      @dialog-close="handleClose"
      @update-list="initRoles"
    />

export default {
  name: 'Setting',
  components: { addRole },
  inject: ['reload'],

methods:{
    clickAdd() {
      this.dialogVisible = true
    },
    // 关闭对话框
    handleClose() {
      this.dialogVisible = false
      // this.$router.go(0)
      // location.reload()
      this.reload()
    },
    editRole(id) {
      // 调用新增方法函数，打开对话框
      this.clickAdd()
      // console.log(id)
      // 点击获取 id
      this.userId = id
      // console.log(this.userId)
    },

}
}

子组件

 // 子组件
<template>
  <el-dialog
    title="提示"
    :visible="dialogVisible"
    width="30%"
    @close="handleClose"
    @open="getRoleInfo"
  >
    <template #default>
      <el-form ref="addFormRef" :model="addForm" :rules="addFormRules" label-width="100px">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="addForm.name" />
        </el-form-item>
        <el-form-item label="角色描述" prop="description">
          <el-input v-model="addForm.description" />
        </el-form-item>
      </el-form>
    </template>
    <template #footer class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="comfirm">确 定</el-button>
    </template>
  </el-dialog>
</template>
<script>
import { addRoles, queryRoles, editRoles } from '@/api/setting'
export default {
  name: 'AddRole',
  props: {
    dialogVisible: {
      type: Boolean
    },
    userId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      addForm: {
        name: '',
        description: ''
      },
      addFormRules: {
        name: [
          { required: true, message: '角色名称不能为空', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '角色描述不能为空', trigger: 'blur' }

        ]
      }
    }
  },
  methods: {
    comfirm() {
      this.$refs.addFormRef.validate(async valid => {
        if (!valid) return
        if (valid) {
          if (this.addForm.id) {
            await editRoles(this.addForm)
          } else {
            await addRoles(this.addForm)
          }
          this.$message.success('保存成功')
          this.handleClose()
          this.$emit('update-list')
        }
      })
    },
    handleClose() {
      this.$emit('dialog-close', '')
      this.addForm = {
        name: '',
        description: ''
      }
      this.$refs.addFormRef.resetFields()
    },
    async getRoleInfo() {
      if (this.userId) {
        const res = await queryRoles(this.userId)
        this.addForm = res
      }
    }

  }
}
</script>