Vue-router路由的props配置
作用:让路由组件更方便的收到参数第一种写法:props值为对象第一种写法:props值为对象,该对象中所有的key-value的组合最终都会通过props传给Detail组件children: [{name: 'xiangqing',path:'detail',component: Detail,// props对象中所有的key-value的组合最终都会通过props传给Detail组件
·
作用:让路由组件更方便的收到参数
-
第一种写法:props值为对象
- 第一种写法:props值为对象,该对象中所有的key-value的组合最终都会通过props传给Detail组件
children: [ { name: 'xiangqing', path:'detail', component: Detail, // props对象中所有的key-value的组合最终都会通过props传给Detail组件 props:{ id: '888', title: '你好啊' } } ]
- 在Detail组件中使用props接收传递来的数据
<template> <div> <ul> <li>接收的id为{{id}}</li> <li>接收的title为{{title}}</li> </ul> </div> </template> <script> export default { name: 'Detail', // 接收组件传递来的数据 props: ['id', 'title'] } </script>
-
这种写法传递的参数不灵活 一般很少使用
- 第一种写法:props值为对象,该对象中所有的key-value的组合最终都会通过props传给Detail组件
-
第二种写法:props值为布尔值
- 第二种写法:props值为布尔值,布尔值为true,则把路由收到的所有params参数通过props传给Detail组件
{ name: 'xiangqing', path:'detail/:id/:title', //使用占位符声明接收params参数 component: Detail, // 第二种写法:props值为布尔值,布尔值为true,则把路由收到的所有params参数通过props传给Detail组件 props: true }
-
传递params参数
<li v-for="item in list" :key="item.id"> <router-link :to="{ name: 'xiangqing', params: { id: item.id, title: item.title } }">{{ item.title }}</router-link> </li>
-
组件内部使用props接收参数
<template> <div> <ul> <li>接收的id为{{id}}</li> <li>接收的title为{{title}}</li> </ul> </div> </template> <script> export default { name: 'Detail', // 接收组件传递来的数据 props: ['id', 'title'] } </script>
-
这种写法相对比上一种传参更为简介灵活 但是只能作用于params类型的参数 无法对query类型的参数起作用
- 第二种写法:props值为布尔值,布尔值为true,则把路由收到的所有params参数通过props传给Detail组件
-
第三种写法:props值为函数
- 第三种写法:props值为函数,该函数返回的对象中每一组key-value都会通过props传给Detail组件
{ 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" } } }
-
组件内部使用props接收参数
<template> <div> <ul> <li>接收的id为{{id}}</li> <li>接收的title为{{title}}</li> {{a}}-----{{b}} </ul> </div> </template> <script> export default { name: 'Detail', // 接收组件传递的参数 props: ['id', 'title', 'a', 'b'] } </script>
-
这种方式传递数据更为灵活 通过函数的$route参数来获取需要的数据传递给组件另外还可以携带一些其他数据 通过$route可以获取params和query两种形式的参数 相对前两种方式来说功能更加的强大
- 第三种写法:props值为函数,该函数返回的对象中每一组key-value都会通过props传给Detail组件
更多推荐
已为社区贡献14条内容
所有评论(0)