动态路由传参

  • 路由表中，设置props属性，然后在组件中通过props接收就可以
  • 第一种方案，只能用于params传参；query传参无法使用 ```javascript // router.js // 第一种方案，props为bool值 { path: ‘/post/:id/:info’, name: ‘post’, props: true } // 传递参数
  • {{ item.title }}

    • // 接收参数

    ``` - props为函数的写法 ```javascript // props为函数 { name: 'xiangqing', path:'detail/:id/:title', //使用占位符声明接收params参数 component: Detail, // 第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件 // props函数会自动调用并提供一个$route参数 可以通过$route来获取想要的数据传递给组件 props($route) { return { id: $route.params.id, title: $route.params.title, // 还可以返回一些别的数据 a: 1, b: "hello" } } } // 接收参数

    // 这种方式传递数据更为灵活 通过函数的$route参数来获取需要的数据传递给组件另外还可以携带一些其他数据 // 通过$route可以获取params和query两种形式的参数 相对前两种方式来说功能更加的强大 ```