阅读量:6
在uniapp中,路由传参的方式有以下几种:
query传参:通过在url中添加查询参数,例如
/pages/home/home?param1=value1¶m2=value2
,在目标页面可以通过this.$route.query
获取参数。params传参:通过在url中添加路径参数,例如
/pages/home/home/param1/param2
,在目标页面可以通过this.$route.params
获取参数。props传参:在路由配置中使用
props: true
,然后在目标页面通过props接收参数。例如:// 路由配置 { path: '/pages/home/home', name: 'home', component: Home, props: true }
<!-- 目标页面 --> <template> <div>{{ param1 }}</div> </template> <script> export default { props: { param1: String } } </script>
eventBus传参:使用事件总线,在源页面触发事件并传递参数,在目标页面接收事件并获取参数。例如:
// 在源页面中 this.$eventBus.$emit('eventName', param);
// 在目标页面中 this.$eventBus.$on('eventName', (param) => { // 处理参数 });
Vuex传参:使用全局状态管理,在源页面通过Vuex存储参数,在目标页面通过Vuex获取参数。
以上是uniapp中常用的路由传参方式,可以根据具体的场景选择合适的方式。