vue路由传参(六种方式)
后台-插件-广告管理-内容页头部广告(手机) |
1.query传参:
query传参,通过get传参也就是原始传参,在path路径后面跟上?id=18&name=“张三”,会传递到query里面
实例: {
path:'/home'?name='张三'&age=18,
component:()=>import('./home.vue')
}
通过$route.query获取对象,点属性名,获取参数
2.动态路由传参(params传参):
在path后面可以跟上多个/:id等等,在路径上面写的参数会传递到动态路由的参数后面
实例:{
path:'./home/:id/:age',
component:()=>import('./home')
}
在模板中使用$route.params会获取参数对象,.属性名获取传递的参数
3.meta传参:
在路由配置文件上通过meta:{name:'张三',id:17}传递
实例:{
path:'./home',
component:()=>import('./home')
meta:{name:'张三',id:16}
}
在模板中使用$route.meta会获取参数对象,.属性名获取传递的参数
4.props传参(分为三种模式:布尔模式,对象模式,函数模式):
(1)布尔模式:
布尔模式传参,在路由配置文件中的路径配置中,如果你使用了动态路由,那么他不仅仅可以往params里面传递参数对象过去,他也会往props里面传递过去,注意参数接取需要在你所要跳转的路径的组件中接取,如果使用动态路由传递参数想要使用props,需要设置props为true
实例: {
path:'/home/:id/:name',
component:()=>import('./Home'),
props:true //布尔模式
},
props:['id','name'],在组件模板中接收
(2)对象模式:
在配置路径的对象中声明一个props对象,其内部的参数,可以在对应的模板中接收
实例:{
path:'/list',
component:()=>import('./List'),
props:{
name:'老王',
age:20,
sex:"男"
} //对象模式
},
props:[,'name','age','sex'],在组件模板中接收
(3)函数模式:
声明一个props属性,只为函数,可以把想要传递的参数通过return对象返回出来,在对应的模板中接收
实例: {
path:'/goods',
component:Goods,
props:()=>{
//函数模式
return {
name:'老王',
age:20,
sex:"男"
}
}
},
props:[,'name','age','sex'],在组件模板中接收
1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。
在线投稿:投稿 站长QQ:1888636
后台-插件-广告管理-内容页尾部广告(手机) |