标签：路由配置 一个 size link router 动态 def 代码 返回
<router-link :to="{name:‘children‘,params:{id:msg}}">切换咯</router-link>
布尔模式：将props属性设置成为true，如果 props 被设置为 true，route.params 将会被设置为组件属性。
{ path: ‘/index‘, component:() => import(‘../src/components/index/index.vue‘), children: [{ path: ‘/children/:id‘, name:‘children‘, component:() => import(‘../src/components/index/children/index.vue‘), props: true, //关键代码 }] },
//index/children.vue
export default{
props:[‘id‘]
}
对象模式：在路由配置(router.js)里边设置props为对象{id:”msg”}，然后去组件中设置props，props的值为路由配置里边的props的key，也就是id
{ path: ‘/index‘, component:() => import(‘../src/components/index/index.vue‘), children: [{ path: ‘/children‘, name:‘children‘, component:() => import(‘../src/components/index/children/index.vue‘), props: { id:‘msg‘ }, }] },
注意：这样设置只使用与props里面的值是静态的
函数模式：可以创建一个函数返回 props。这样你便可以将参数转换成另一种类型，将静态值与基于路由的值结合等等
{ path: ‘/index‘, component:() => import(‘../src/components/index/index.vue‘), children: [{ path: ‘/children‘, name:‘children‘, component:() => import(‘../src/components/index/children/index.vue‘), props:()=>({id:‘msg1‘}), //静态设置 }] },
{ path: ‘/index‘, component:() => import(‘../src/components/index/index.vue‘), children: [{ path: ‘/children‘, name:‘children‘, component:() => import(‘../src/components/index/children/index.vue‘), props:(route)=>({id:route.params.id}), //动态设置 }] },
标签：路由配置 一个 size link router 动态 def 代码 返回
原文地址：https://www.cnblogs.com/peilin-liang/p/12015804.html
