vue项目中，新增或编辑后返回列表页，数据不刷新问题

最新推荐文章于 2025-01-16 14:15:00 发布

原创最新推荐文章于 2025-01-16 14:15:00 发布 · 3.3k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vue精选

当前文章被收录于：

vue精选

18 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

在Vue项目中，当从新增或编辑页面返回列表页时，经常遇到列表数据未能自动刷新的问题。这个问题通常发生在二级路由的场景下。为解决此问题，可以在父路由中定义一个方法，并传递给子路由。在子路由完成新增或编辑操作后，调用这个方法来触发列表数据的更新，从而实现页面的刷新。

场景：
新增编辑页是列表页的二级路由
在新增或编辑后列表页不刷新相应的数据

在父路由中：加一个@refresh="getKnowledgeList",自定义方法，传到子路由上，其中绑定的方法为获取列表页的数据方法

<template>
  <router-view v-if="hidden" :key="key" @refresh="getKnowledgeList"></router-view>
  <section v-else class="pd20"></section>

在子路由中：使用$emit触发那个方法

async postKnowledgeCreate() {
      try {
        await postKnowledgeCreate({ ...this.form })
        this.$message.success('新增成功')
        this.isLock = false
        this.resetForm('form')
        this.$emit('refresh')
        this.closeSelectedTag()
      } catch (error) {
        this.isLock = false
      }
    },