uniapp里路由传参方法详细解析

在uniapp开发中，路由传参是实现页面间数据交互的重要方式。掌握不同的路由传参方法，能够让我们的应用更加灵活和高效。下面就来详细解析uniapp里常见的路由传参方法。

一、通过URL传递参数

这是最常见的一种方式。在导航到新页面时，可以在URL中添加参数。例如，使用uni.navigateTo方法进行页面跳转时，可以这样传参：

uni.navigateTo({
  url: 'test?id=1&name=uniapp'
});

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

onLoad() {
  console.log(this.$route.query.id); 
  console.log(this.$route.query.name);
}

二、使用params传递参数

当使用命名路由时，可以通过params来传递参数。在路由配置中给目标路由设置名称：

{
  path: '/test',
  name: 'testPage'
}

然后在跳转时：

uni.navigateTo({
  name: 'testPage',
  params: {
    id: 1,
    name: 'uniapp'
  }
});

在目标页面通过this.$route.params获取参数。

三、全局事件总线传参

可以利用uniapp的全局事件总线来传递参数。在发送页面：

uni.$emit('dataChange', {id: 1, name: 'uniapp'});

在接收页面：

uni.$on('dataChange', (data) => {
  console.log(data.id);
  console.log(data.name);
});

四、本地存储传参

还可以将数据存储到本地存储中，在目标页面再获取。例如：

uni.setStorageSync('data', {id: 1, name: 'uniapp'});

在目标页面：

let data = uni.getStorageSync('data');
console.log(data.id);
console.log(data.name);

不同的路由传参方法适用于不同的场景。开发人员需要根据实际需求选择合适的传参方式，以确保应用的性能和用户体验。