为解决在组件中使用$router产生的高度耦合，故使用组件传参。
1、布尔模式传参（适用于动态路由）
组件：
<script> export default { // props 父 -> 子 props:{ name:{ type:String, // default 默认 default:‘xiao‘ } } } </script>
路由（将props设置为true，route将会被设置为组件属性）：
{
path:‘/argu/:name‘,
name:‘argu‘,
component:() => import(‘@/views/argu.vue‘),
props:true
},
2、对象模式
组件：
export default { props:{ food:{ type:String, default:‘apple‘ } } } </script>
路由：
{
path: ‘/about‘,
name:‘about‘,
component: () => import( ‘@/views/About.vue‘),
props:{
food:‘banana‘
}
},
3、函数模式
组件：
props:{
food:{
type:String,
default:‘apple‘
}
},
路由：
{
path: ‘/‘,
alias:‘/home_page‘,
name:‘home‘,
component: Home,
props:route =>({
food:route.query.food
})
},
原文：https://www.cnblogs.com/-xiao/p/11087871.html