Angular Router：同一组件对应多路由的数据隔离问题

方法1：通过组件工厂函数返回新实例 #

如果是Vue框架，可通过工厂函数每次返回新的组件构造器或组件选项对象，确保每个路由跳转都创建独立的组件实例：

// Vue 2 写法
{
  path: 'model/:model',
  component: () => Vue.extend(modelComponent)
}

// Vue 3/通用对象扩展写法
const createNewModelComponent = () => {
  // 浅拷贝组件选项，生成新对象
  const newComponent = { ...modelComponent }
  // 确保data是独立的函数（若原组件data已为函数可省略此步）
  if (typeof newComponent.data === 'function') {
    const originalData = newComponent.data
    newComponent.data = function() {
      return { ...originalData.call(this) }
    }
  }
  return newComponent
}

// 路由配置
{
  path: 'model/:model',
  component: createNewModelComponent
}

如果是React框架，利用render属性替代component，每次返回新的组件实例：

{
  path: 'model/:model',
  render: () => <ModelComponent />
}

方法2：通过路由视图的key强制刷新组件 #

在路由视图组件上绑定唯一的key（比如完整路由路径），当路由参数变化时，key更新会触发组件重新创建，从而实现数据隔离：

<!-- Vue 写法 -->
<router-view :key="$route.fullPath"></router-view>

<!-- React 写法 -->
<Routes>
  <Route path="model/:model" element={<ModelComponent key={window.location.pathname} />} />
</Routes>

方法3：组件内部重置数据 #

如果不想修改路由配置，可在组件内部监听路由参数变化，手动重置数据状态。以Vue为例：

export default {
  watch: {
    '$route.params.model'() {
      // 调用数据初始化方法，重置所有状态
      this.initData()
    }
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      // 这里初始化组件的所有数据
      this.form = {}
      this.list = []
      // ...其他数据重置逻辑
    }
  }
}

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