uniapp路由传参的方式有哪些

   2025-02-15 2490
核心提示:在uniapp中,路由传参的方式有以下几种:query传参:通过在url中添加查询参数,例如/pages/home/home?param1=value1param2=value

在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中常用的路由传参方式,可以根据具体的场景选择合适的方式。

 
 
更多>同类维修知识
推荐图文
推荐维修知识
点击排行
网站首页  |  关于我们  |  联系方式  |  用户协议  |  隐私政策  |  网站留言