使用编程式导航实现页面的跳转，当单击按钮时，跳转到另一个组件中，并携带传递的参数。

在前端开发中，尤其是使用现代框架如React、Vue或Angular时，编程式导航通常通过组件间的通信机制来实现页面跳转。当你需要点击按钮时从一个组件跳转到另一个组件，并传递数据，可以按照以下步骤操作：

1. **设置路由**：在你的项目中，先配置好路由系统，比如React Router或Vue Router，它们允许你在应用内定义路径和组件映射。

2. **定义组件和事件处理**：在发送跳转的组件里，创建一个方法（通常是`onClick`事件处理器），该方法接收你想要传递的参数作为输入。

// React 示例
class ButtonComponent extends React.Component {
  handleClick = (param) => {
    this.props.history.push(`/target-route?param=${param}`);
  };

  render() {
    return <button onClick={() => this.handleClick('exampleValue')}>跳转</button>;
  }
}

3. **接收并处理参数**：目标组件（即路由对应的组件）在`componentDidMount`或生命周期钩子中监听URL的变化，然后解析查询字符串获取传入的参数。

// TargetComponent.js
import { useParams } from 'react-router-dom';

function TargetComponent() {
  const { param } = useParams();

  useEffect(() => {
    console.log('Received parameter:', param);
    // 在这里你可以根据param做进一步的操作
  }, [param]);

  return <div>已接收到参数：{param}</div>;
}