为解决在组件中使用$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
})
},