路由组件能不能传递props数据

可以,有三种写法

第一种

path: '/search/:keyWord?',
name:'search',
component: Search,
//路由组件能不能传递props数据
//布尔值写法  好处在于可以把params作为路由组件身上的一个属性(注意只有params参数)
props:true,

//路由跳转
this.$router.push('/search/' + this.keyWord + '? k=' + this.keyWord.toLowerCase())

search.vue(路由组件)

props:['keyWord']//props接收
//这种写法  路由组件只能传props
//而且只能传params参数

第二种

path: '/search/:keyWord?',
name:'search',
component: Search,
//路由组件能不能传递props数据
//对象写法 额外的给路由组件传递一些数据
 props:{a:1,b:2} //不是传递query和params 而只是额外的数据

第三种

path: '/search/:keyWord?',
    name:'search',
    component: Search,
    meta: {
        show: true
    },
    //路由组件能不能传递props数据
    //函数写法:可以params参数,query参数,额外数据,通过props传递给路由组件
    props:($route)=>{
        return {keyWord:$route.params.keyWord,k:$route.query.k,a:6,b:6}
    }
    //我们有简写形式 注意return后面的要作为一个整体 防止出错 (直接写成一个对象有语法问题)
    //props:($route)=>({keyWord:$route.params.keyWord,k:$route.query.k})
},

search组件接收

props:['keyWord','k','a','b'],