如何从带有不同事件绑定的组件中抽象共享HTML片段？

结论 #

这种场景完全不需要通过路由实现。

原因解释 #

路由的核心能力是处理页面/视图的路径映射、导航跳转逻辑，仅适用于需要通过URL区分不同内容场景的需求。你当前的需求是抽离复用的公共UI片段，属于通用组件封装的常规场景，和路由能力完全不匹配。

正确实现方案 #

你只需要把这段公共HTML封装为独立的通用子组件，通过「自定义事件」或者「接收回调函数Props」的方式适配不同的点击逻辑即可：

• 封装公共组件时，把按钮的点击事件对外暴露，或者声明一个函数类型的Props（比如onButtonClick）
• 各个父组件调用这个公共组件时，把自身对应的业务逻辑函数传入即可。

举个简单的实现示例（以Vue框架为例，React、Angular等框架逻辑通用）：

公共组件代码

<!-- 封装的公共组件：common-btn-wrapper.vue -->
<div class="common-wrapper">
  <button type="button" @click="handleClick">Label</button>
  <!-- 其他公共HTML片段内容 -->
</div>

<script>
export default {
  props: {
    // 接收父组件传入的点击回调
    onButtonClick: {
      type: Function,
      required: true
    }
  },
  methods: {
    handleClick() {
      this.onButtonClick()
    }
  }
}
</script>

父组件调用示例

<!-- 业务组件A调用，绑定A的业务逻辑 -->
<common-btn-wrapper :on-button-click="exampleA" />

<!-- 业务组件B调用，绑定B的业务逻辑 -->
<common-btn-wrapper :on-button-click="exampleB" />

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