vue2 elementui 后台新增完后返回列表页刷新页面

在Vue.js 2和Element UI中，可以使用路由导航和事件总线来实现新增后返回列表页并刷新页面的效果。

1. 在路由导航中定义列表页的路由

首先，在路由配置中定义列表页的路由，例如：

const router = new VueRouter({
  routes: [
    { path: '/list', component: List },
    { path: '/add', component: Add }
  ]
})

其中，List为列表页的组件，Add为新增页的组件。

2. 在新增页中提交数据并触发事件

在新增页中，通过Element UI的Form组件提交新增数据，并在提交成功后触发一个自定义事件，例如：

<template>
  <el-form @submit="onSubmit">
    <!-- 表单字段 -->
    <el-button type="primary" native-type="submit">提交</el-button>
  </el-form>
</template>

<script>
export default {
  methods: {
    onSubmit() {
      // 提交新增数据
      this.$http.post('/api/add', this.formData)
        .then(response => {
          // 触发自定义事件
          this.$emit('add-success')
        })
    }
  },
  data() {
    return {
      formData: {}
    }
  }
}
</script>

在提交成功后，通过`this.$emit`触发一个自定义事件`add-success`，表示新增成功。

3. 在列表页中监听自定义事件并刷新数据

在列表页中，监听新增页触发的自定义事件，并重新加载列表数据，例如：

<template>
  <div>
    <el-table :data="tableData">
      <!-- 表头和列 -->
    </el-table>
    <el-button type="primary" @click="add">新增</el-button>
  </div>
</template>

<script>
export default {
  mounted() {
    // 监听新增成功事件
    this.$bus.$on('add-success', this.loadList)
    // 加载列表数据
    this.loadList()
  },
  beforeDestroy() {
    // 移除事件监听
    this.$bus.$off('add-success', this.loadList)
  },
  methods: {
    add() {
      // 跳转到新增页
      this.$router.push('/add')
    },
    loadList() {
      // 加载列表数据
      this.$http.get('/api/list')
        .then(response => {
          this.tableData = response.data
        })
    }
  },
  data() {
    return {
      tableData: []
    }
  }
}
</script>

在列表页的`mounted`钩子函数中，通过`this.$bus.$on`监听新增成功事件`add-success`，并在回调函数中调用`loadList`方法重新加载列表数据。在`beforeDestroy`钩子函数中，通过`this.$bus.$off`移除事件监听，避免内存泄漏。

在`add`方法中，使用`this.$router.push`跳转到新增页。在新增页中提交成功后，通过`this.$emit('add-success')`触发自定义事件，列表页会收到通知并重新加载数据。