vue3新增页面弹窗关闭刷新页面

Vue3 中关闭页面弹窗后刷新页面可以通过监听 `beforeunload` 事件来实现。可以在页面组件中添加如下代码：

beforeUnmount() {
  window.removeEventListener('beforeunload', this.refreshPage)
},

mounted() {
  window.addEventListener('beforeunload', this.refreshPage)
},

methods: {
  refreshPage() {
    location.reload()
  }
}

这里使用 `beforeUnmount` 钩子函数来移除事件监听器，在页面组件挂载时添加监听器，当用户关闭页面时，会触发 `beforeunload` 事件，然后调用 `refreshPage` 方法来刷新页面。

相关问题

vue2+antdesign懒加载树节点，左侧是这个树，右侧是一个列表，选中左侧树节点，右侧加载列表，点击右侧列表新增，在新增弹窗中填写名称，点击保存后，左侧树选中节点下也新增对应应列表名称的一个树节点，但是现在新增后左侧懒加载树不刷新增加的数据，该如何写？示例代码是什么？

可以通过手动更新左侧树的数据来实现新增后刷新左侧懒加载树。具体实现方式如下：

1. 在右侧列表新增时，同时更新左侧树的数据，添加对应的树节点。
2. 在更新左侧树的数据时，需要注意更新的数据结构要与懒加载树的数据结构一致，否则不能正确显示新增的节点。
3. 更新左侧树的数据后，需要手动触发左侧树的刷新，可以通过设置左侧树的 key 值来实现。

以下是示例代码，供参考：

<template>
  <div>
    <div class="tree-container">
      <a-tree :treeData="treeData" :loadData="loadData" v-model:selectedKeys="selectedKeys" :treeNodeFilterProp="'title'"></a-tree>
    </div>
    <div class="list-container">
      <a-list :dataSource="dataSource" :loading="loading" @click="handleAdd"></a-list>
    </div>
    <a-modal v-model:visible="visible" @ok="handleSave">
      <a-form :form="form">
        <a-form-item label="名称" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
          <a-input v-model:value="name" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { reactive, toRaw } from 'vue';
import { message, Modal, Form, Input, List, Tree } from 'ant-design-vue';

export default {
  components: {
    [Modal.name]: Modal,
    [Form.name]: Form,
    [Form.Item.name]: Form.Item,
    [Input.name]: Input,
    [List.name]: List,
    [Tree.name]: Tree,
  },
  setup() {
    const form = reactive({
      name: '',
    });
    const dataSource = reactive([]);
    const treeData = reactive([]);
    const selectedKeys = reactive([]);
    let loading = false;
    let visible = false;

    const loadData = async treeItem => {
      // 模拟异步加载数据
      loading = true;
      const data = await fetch(`https://example.com/api/getData?parentId=${treeItem.key}`);
      loading = false;
      if (data.code === 0) {
        treeItem.children = data.data;
      } else {
        message.error(data.msg);
      }
    };

    const handleAdd = () => {
      visible = true;
    };

    const handleSave = () => {
      form.validateFields().then(values => {
        // 模拟保存数据
        dataSource.push(values);
        // 更新左侧树的数据
        const key = selectedKeys[0];
        const node = findTreeNodeByKey(treeData, key);
        const newNode = {
          key: `${key}-${node.children.length}`,
          title: values.name,
          isLeaf: true,
        };
        node.children.push(newNode);
        // 手动触发左侧树的刷新
        treeData.push({});
        // 关闭弹窗
        visible = false;
      });
    };

    const findTreeNodeByKey = (tree, key) => {
      for (const node of tree) {
        if (node.key === key) {
          return node;
        }
        if (node.children) {
          const result = findTreeNodeByKey(node.children, key);
          if (result) {
            return result;
          }
        }
      }
    };

    return {
      form,
      dataSource,
      treeData,
      selectedKeys,
      loading,
      visible,
      loadData,
      handleAdd,
      handleSave,
    };
  },
};
</script>

在这个示例代码中，我们通过 `treeData.push({})` 手动触发了左侧树的刷新，从而刷新了树的数据。同时，我们还实现了在右侧列表新增时更新左侧树的数据，具体实现方法是遍历左侧树的数据找到对应的节点，并添加新的节点数据。

注意，这个示例代码仅供参考，实际使用时需要根据具体情况进行修改和优化。

else { this.$post("/school",{ "name": this.form.name, }).then(response => { this.$message("新增学校成功"); this.newList();

这段代码是在上一个问题中代码块的 `if` 语句中，当表单中的 `id` 为 `null` 时执行的操作。

具体来说，该方法调用 Vue.js 封装的 `$post()` 方法，将表单中的 `name` 作为请求参数，发送 POST 请求到 `/school` 接口，创建新的学校。

最后，如果创建成功，则弹出一条提示信息，关闭当前弹窗，然后调用 `newList()` 方法刷新页面数据。