通过链接传递props到子组件，以完成进行api调用的url

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

const App = () => (
  <Router>
    <div>
      <nav>
        <ul>
          <li>
            <Link to="/api-call/123">API调用</Link>
          </li>
        </ul>
      </nav>

      <Route path="/api-call/:id" component={ApiCallComponent} />
    </div>
  </Router>
);

2. 子组件中获取传递的参数并进行API调用：
```jsx
import { useParams } from 'react-router-dom';

const ApiCallComponent = () => {
  const { id } = useParams();
  const apiUrl = `https://api.example.com/data/${id}`;

  // 进行API调用，使用apiUrl
  // ...

  return <div>API调用组件</div>;
};

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const router = new VueRouter({
  routes: [
    {
      path: '/api-call/:id',
      component: ApiCallComponent,
    },
  ],
});

const app = new Vue({
  router,
}).$mount('#app');

<template>
  <div>
    <h1>API调用组件</h1>
  </div>
</template>

<script>
export default {
  mounted() {
    const id = this.$route.params.id;
    const apiUrl = `https://api.example.com/data/${id}`;

    // 进行API调用，使用apiUrl
    // ...
  },
};
</script>