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

最新推荐文章于 2025-02-25 18:18:39 发布

楚楚媛

最新推荐文章于 2025-02-25 18:18:39 发布

阅读量285

点赞数

文章标签：前端 javascript vue.js

本文链接：https://blog.youkuaiyun.com/m0_62435896/article/details/129362354

版权

项目创建常见错误专栏收录该内容

8 篇文章

订阅专栏

文章详细介绍了在Vue.js中，如何通过路径参数、额外数据以及函数方法将数据传递给路由组件，包括params、query及自定义数据的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

可以,有三种写法

第一种

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'],