uniapp路由传参的方式有哪些

uniapp

小亿

712

2023-10-22 05:21:20

栏目: 编程语言

在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) => {
  // 处理参数
});

以上是uniapp中常用的路由传参方式，可以根据具体的场景选择合适的方式。

最新问答