Angular 4跳转新路由前获取当前路由数据并触发组件自动保存

我来分享几个靠谱的方案，完美匹配你的需求——在跳转到新路由前自动保存当前组件的表单数据，同时解决你提到的「获取当前路由数据」的挑战：

一、组件内直接处理（最推荐，简单可靠） #

不管你用Vue还是React，组件内的路由拦截钩子是最直接的方式，因为它能直接访问组件实例的this（Vue）或者组件内的状态/方法（React），不需要额外去获取路由数据和组件实例。

对于 Vue（Vue Router） #

在需要保存表单的组件里，使用beforeRouteLeave路由守卫——这是Vue Router专门为组件离开路由提供的钩子，直接在组件内定义即可：

<template>
  <!-- 你的表单内容 -->
  <input v-model="formData.username" />
</template>

<script>
export default {
  data() {
    return {
      formData: { username: '' }
    }
  },
  methods: {
    saveFormData() {
      // 这里写你的保存逻辑：存到localStorage、提交后端都可以
      console.log('自动保存表单数据:', this.formData)
      localStorage.setItem('formData', JSON.stringify(this.formData))
    }
  },
  beforeRouteLeave(to, from, next) {
    // 离开当前路由前，直接调用组件内的保存方法
    this.saveFormData()
    // 允许跳转到新路由
    next()
  }
}
</script>

这里的from参数就是当前要离开的路由对象，你可以通过from.name、from.path拿到当前路由的名称、路径，from.meta拿到你自定义的路由元数据——完美解决「获取当前路由数据」的问题。

对于 React（React Router v6+） #

使用Prompt组件来拦截路由跳转，同时在拦截回调里触发保存方法：

import { useState } from 'react'
import { Prompt } from 'react-router-dom'

export default function FormPage() {
  const [formData, setFormData] = useState({ username: '' })

  const saveFormData = () => {
    // 保存逻辑示例
    console.log('自动保存表单数据:', formData)
    localStorage.setItem('formData', JSON.stringify(formData))
  }

  return (
    <>
      {/* 拦截路由跳转，触发保存 */}
      <Prompt
        when={true} // 可以改成`formData有修改`的判断，比如`isFormDirty`
        message={() => {
          saveFormData()
          return true // 返回true允许跳转，返回false会阻止跳转
        }}
      />
      {/* 你的表单 */}
      <input
        value={formData.username}
        onChange={(e) => setFormData({ ...formData, username: e.target.value })}
      />
    </>
  )
}

要获取当前路由数据，直接用useLocation()钩子：

import { useLocation } from 'react-router-dom'

function FormPage() {
  const location = useLocation()
  console.log('当前路由路径:', location.pathname)
  console.log('当前路由查询参数:', location.search)
  // ...其他逻辑
}

二、全局路由守卫处理（适合批量管理多个表单页面） #

如果你的项目中有很多需要自动保存的表单页面，不想每个组件都写重复代码，可以用全局路由守卫，结合路由元数据来统一处理：

步骤1：给路由添加自定义元数据 #

在定义路由时，给需要自动保存的路由加上meta字段，标记是否需要保存、以及对应的组件方法名：

// Vue Router 路由示例
const routes = [
  {
    path: '/profile',
    name: 'ProfilePage',
    component: () => import('./views/ProfilePage.vue'),
    meta: {
      needAutoSave: true,
      saveMethod: 'saveProfileData' // 对应组件内的保存方法名
    }
  },
  {
    path: '/settings',
    name: 'SettingsPage',
    component: () => import('./views/SettingsPage.vue'),
    meta: {
      needAutoSave: true,
      saveMethod: 'saveSettingsData'
    }
  }
]

步骤2：全局路由守卫中拦截并触发保存 #

在全局前置/解析守卫中，通过from参数获取当前要离开的路由数据，判断是否需要保存，再调用对应组件的方法：

// Vue Router 全局守卫示例
const router = createRouter({
  // 路由配置...
})

router.beforeResolve((to, from, next) => {
  // 1. 获取当前路由的元数据
  const { needAutoSave, saveMethod } = from.meta
  if (!needAutoSave || !saveMethod) {
    next()
    return
  }

  // 2. 获取当前路由对应的组件实例（可以在组件mounted时把实例注册到全局Map中）
  const currentComponentInstance = window.routeComponentMap.get(from.name)
  if (currentComponentInstance && typeof currentComponentInstance[saveMethod] === 'function') {
    // 3. 触发保存方法
    currentComponentInstance[saveMethod]()
  }

  next()
})

这里的from参数就是当前路由的完整数据，包含name、path、meta等所有信息，直接取用即可。

核心要点总结 #

• 获取当前路由数据：在路由守卫中用from（Vue）或useLocation()（React）；组件内部用this.$route（Vue 2）、useRoute()（Vue 3）或useLocation()（React），直接就能拿到路由的名称、路径、元数据等所有信息。
• 触发组件保存方法：优先用组件内的路由钩子，直接访问组件实例的方法；全局管理的话，结合路由元数据和组件实例注册来批量处理。

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