如何实现点击按钮跳转页面和携带数据

要实现点击按钮跳转页面并携带数据，可以使用前端框架（如React、Vue、Angular等）提供的路由功能进行实现。具体步骤如下：

1. 首先在源页面中定义一个按钮，并通过事件监听器绑定一个回调函数。

2. 在回调函数中使用路由库提供的API实现页面跳转和数据传递。例如在React中，可以使用react-router-dom提供的Link组件或history对象中的push函数来实现跳转，同时可以将需要传递的数据作为URL参数或state传递。

3. 在目标页面中获取传递过来的数据，并进行相应的处理。在React中，可以通过props或location对象来获取传递的数据。

示例代码如下（使用React和react-router-dom）：

import { Link, useHistory } from 'react-router-dom';

function SourcePage() {
  const history = useHistory();

  function handleClick() {
    const data = { name: 'John', age: 30 };
    history.push({
      pathname: '/target',
      state: data,
    });
  }

  return (
    <div>
      <button onClick={handleClick}>跳转到目标页面</button>
    </div>
  );
}

function TargetPage(props) {
  const location = props.location;
  const data = location.state;

  return (
    <div>
      <p>姓名：{data.name}</p>
      <p>年龄：{data.age}</p>
    </div>
  );
}

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={SourcePage} />
        <Route path="/target" component={TargetPage} />
      </Switch>
    </Router>
  );
}