如何获取返回栈上一页面的route name并按条件执行对应方法

首先明确：是完全可以实现的。核心逻辑是所有前端路由框架都会维护页面路由栈信息，只需读取栈中倒数第二个条目对应的路由名称，即可完成条件判断和对应方法调用。

不同技术栈的实现示例 #

Vue 2/3 + Vue Router #

可以通过全局路由守卫维护路由历史栈，方便随时读取上一页路由信息：

// 全局维护路由历史数组
const routeHistory = []
router.beforeEach((to, from, next) => {
  // 可自行过滤重定向、404等不需要计入栈的路由
  if (from.name) {
    routeHistory.push(from.name)
  }
  next()
})

// 自定义返回方法，调用时替换原有router.back()
const goBackWithCheck = () => {
  // 边界判断：路由栈长度小于1时说明是首页，没有上一页
  if (routeHistory.length < 1) return
  // 获取待返回的目标页面路由名
  const prevRouteName = routeHistory[routeHistory.length - 1]
  // 按业务需求做条件判断
  if (prevRouteName === 'TargetRouteName') {
    // 执行你需要的自定义方法
    handleCustomLogic()
  }
  // 执行返回操作
  router.back()
  // 移除当前栈顶记录，避免栈冗余
  routeHistory.pop()
}

微信小程序 / UniApp #

框架原生提供了页面栈查询能力，无需额外维护历史记录：

const goBackWithCheck = () => {
  // 获取当前所有打开的页面栈
  const pageStack = getCurrentPages()
  // 边界判断：栈长度小于2时为首页，没有上一页
  if (pageStack.length < 2) return
  // 待返回的上一页为栈的倒数第二个元素
  const prevPage = pageStack[pageStack.length - 2]
  // 微信小程序取route属性为页面路径，UniApp可直接取$route.name获取配置的路由名
  const prevRouteName = prevPage.$route?.name || prevPage.route
  if (prevRouteName === 'TargetRouteName' || prevRouteName === 'pages/target/index') {
    // 执行自定义业务逻辑
    handleCustomLogic()
  }
  // 执行返回操作
  uni.navigateBack()
}

React + React Router v6 #

通过路由监听维护历史栈实现：

import { useLocation, useNavigate, useEffect, useRef } from 'react-router-dom'

function useCustomGoBack() {
  const location = useLocation()
  const navigate = useNavigate()
  const routeHistory = useRef([])

  // 监听路由变化更新历史栈
  useEffect(() => {
    routeHistory.current.push(location.pathname)
    return () => {
      // 组件卸载时清理当前路由记录
      routeHistory.current.pop()
    }
  }, [location])

  const goBackWithCheck = () => {
    if (routeHistory.current.length < 2) return
    const prevRoutePath = routeHistory.current[routeHistory.current.length - 2]
    if (prevRoutePath === '/target/path') {
      // 执行自定义逻辑
      handleCustomLogic()
    }
    navigate(-1)
    routeHistory.current.pop()
  }

  return goBackWithCheck
}

注意事项 #

• 存在路由重定向场景时，要在维护历史栈的逻辑中过滤重定向路由条目，避免判断逻辑出错
• 所有场景都要加栈长度的边界判断，避免首次进入应用调用返回时出现undefined报错
• 多标签页模式的后台管理系统需要按标签页隔离路由栈，不要使用全局统一的历史栈

内容的提问来源于stack exchange，提问作者ccd