vue3uniapp路由跳转传递参数

在Vue3和uni-app中，可以使用$route对象来获取当前路由的信息，包括路由参数。可以通过在URL中添加参数的方式传递数据，然后在目标页面中通过$route.query获取传递过来的参数。

以下是一个示例代码，演示如何在uni-app中使用路由传递参数：

1.在源页面中，使用uni.navigateTo方法跳转到目标页面，并在URL中添加参数：

uni.navigateTo({
  url: '/pages/targetPage/targetPage?id=123&name=uni-app',
  success: function(res) {
    console.log('跳转成功');
  }
});

2.在目标页面中，通过$route.query获取传递过来的参数：

export default {
  onLoad(options) {
    console.log(options.id); // 输出：123
    console.log(options.name); // 输出：uni-app
  }
}

相关问题

uniapp路由跳转原理

在 Uniapp 中，路由跳转是通过 Vue Router 实现的。Vue Router 是 Vue.js 官方的路由管理器，它和 Vue.js 本身的核心深度集成，可以方便地实现页面间的跳转和参数传递。

在 Uniapp 中，我们可以在页面中通过 `$router` 对象访问路由对象，通过 `$route` 对象访问当前路由的信息。在代码中，我们可以通过 `$router.push()` 方法实现路由跳转，该方法接受一个路由对象或者一个路由地址字符串作为参数，用于指定需要跳转到的页面。

当我们在代码中使用 `$router.push()` 方法跳转页面时，Vue Router 会根据指定的路由信息，匹配路由表中对应的路由规则，并在路由表中找到对应的组件。然后，Vue Router 会创建一个新的路由实例，并将该实例挂载到指定的组件上，从而实现页面的跳转。

需要注意的是，在 Uniapp 中，由于支持多端开发，因此需要在 `manifest.json` 文件中指定各个端的路由规则，以及不同端之间的路由跳转方式。同时，Uniapp 还提供了一些额外的路由功能，例如 tabBar、页面栈管理等，使得开发者可以更加方便地进行页面间的跳转和管理。

vue和uniapp传参的区别

Vue和Uniapp都是基于Vue框架开发的，因此它们的传参方式非常相似。不过，它们在传参上还是有一些区别的。

1. 路由传参

在Vue中，通过路由跳转时，可以通过$route对象的params和query属性来传递参数。params是用于传递必选参数，而query则是用于传递可选参数，例如：

// 跳转路由时传递参数
this.$router.push({
  name: 'user',
  params: {
    userId: '123'
  },
  query: {
    name: '张三'
  }
})

// 获取参数
this.$route.params.userId // '123'
this.$route.query.name // '张三'

在Uniapp中，也是通过路由跳转来传递参数，但是它需要使用uni.navigateTo或uni.redirectTo方法来跳转页面，并且需要在url后面拼接参数，例如：

// 跳转路由时传递参数
uni.navigateTo({
  url: '/pages/user/user?id=123&name=张三'
})

// 获取参数
this.$route.query.id // '123'
this.$route.query.name // '张三'

2. 组件间传参

在Vue中，通过props属性来传递父组件传递给子组件的参数，例如：

// 父组件
<template>
  <div>
    <child :name="name" :age="age"></child>
  </div>
</template>
<script>
import Child from './Child.vue'
export default {
  components: {
    Child
  },
  data() {
    return {
      name: '张三',
      age: 18
    }
  }
}
</script>

// 子组件
<template>
  <div>
    <p>姓名：{{ name }}</p>
    <p>年龄：{{ age }}</p>
  </div>
</template>
<script>
export default {
  props: {
    name: String,
    age: Number
  }
}
</script>

在Uniapp中，也是通过props来传递参数，但是需要在子组件的props属性中加上type属性，例如：

// 父组件
<template>
  <div>
    <child :name="name" :age="age"></child>
  </div>
</template>
<script>
import Child from './Child.vue'
export default {
  components: {
    Child
  },
  data() {
    return {
      name: '张三',
      age: 18
    }
  }
}
</script>

// 子组件
<template>
  <div>
    <p>姓名：{{ name }}</p>
    <p>年龄：{{ age }}</p>
  </div>
</template>
<script>
export default {
  props: {
    name: {
      type: String,
      default: ''
    },
    age: {
      type: Number,
      default: 0
    }
  }
}
</script>

总的来说，Vue和Uniapp的传参方式很相似，但是在路由传参和组件间传参上还是有一些细微的差别。