vue3中页面返回时刷新首页的处理方案

绝世唐门三哥2026-07-10 13:06

onDeactivated 是离开时 触发的，不是回来时！应该用 onActivated。

正确 Demo

ts 复制代码

// ✅ 列表页 index.vue
import { onActivated } from 'vue'

// 每次从其他页切回时自动刷新列表
onActivated(() => {
  getList()
})

ts 复制代码

// 新增页 add.vue - 保存成功
function handleSave() {
  addGroup(addForm).then(() => {
    ElMessage.success('Create successfully')
    router.back()
    tagsViewStore.delView(route)  // 关闭新增页标签，回到列表页触发 onActivated
  })
}

如果需要精确控制（仅从特定页返回才刷新）

ts 复制代码

// 用路由守卫拿到 from，存到变量里
let isFromAdd = false

router.beforeEach((to, from) => {
  isFromAdd = from.path === '/ae/groupSetup/add'
})

onActivated(() => {
  if (isFromAdd) {
    getList()
    isFromAdd = false  // 重置标记
  }
})

总结

操作	正确	错误
获取来源路由	`router.beforeEach((to, from) => ...)`	`useRoute().from`
返回时刷新	`onActivated`	`onDeactivated`
简单场景	直接用 `onActivated(() => getList())`	不需要条件判断