如何将父路由的数据传给子路由

在前端框架中，如Vue、React等，父组件可以通过props属性将数据传递给子组件，这一点也适用于父路由和子路由之间的数据传递。

在Vue中，可以在定义路由时，通过props属性将数据传递给子路由，示例代码如下：

const router = new VueRouter({
  routes: [
    {
      path: '/parent',
      component: ParentComponent,
      props: { message: 'Hello from parent' }, // 将数据传递给子组件
      children: [
        {
          path: 'child',
          component: ChildComponent,
          props: true // 子路由可以接收父路由的所有props
        }
      ]
    }
  ]
})

在React中，可以通过Route组件的render属性，将数据传递给子路由，示例代码如下：

import { Route } from 'react-router-dom'

const ParentComponent = (props) => {
  return (
    <div>
      <h1>{props.message}</h1>
      <<Route path="/parent/child" render={(props) => <ChildComponent {...props} message={props.message} />} />
    </div>
  )
}

const ChildComponent = (props) => {
  return (
    <div>
      <h1>{props.message}</h1>
    </div>
  )
}

const App = () => {
  return (
    <Router>
      <Route path="/parent" render={(props) => <ParentComponent {...props} message="Hello from parent" />} />
    </Router>
  )
}