uniapp路由传参的方式有哪些

在uniapp中,路由传参的方式有以下几种:

query传参:通过在url中添加查询参数,例如/pages/home/home?param1=value1&param2=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中常用的路由传参方式,可以根据具体的场景选择合适的方式。

阅读剩余
THE END