uniapp路由怎么实现带参数的跳转-猿码集

uniapp路由怎么实现带参数的跳转

uniapp路由概述

在了解uniapp如何实现带参数的路由跳转之前，我们需要先了解uniapp中的路由机制。

uniapp的路由机制类似于前端框架Vue的路由机制。在uniapp中，可以使用uni.navigateTo、uni.redirectTo、uni.switchTab、uni.reLaunch这四个API进行路由跳转。

其中，uni.navigateTo和uni.redirectTo是两个比较常用的API，它们可以用来进行非tabbar页面的跳转。uni.navigateTo是正常的跳转方式，而uni.redirectTo是在跳转完成后，将之前的页面从栈中弹出，保证当前页面为栈顶。

举个例子，如下所示：


// 跳转到test页面
uni.navigateTo({
  url: '/pages/test/test'
})
// 跳转到test页面并关闭中间页面
uni.redirectTo({
  url: '/pages/test/test'
})

uniapp路由带参数跳转

在一些实际的开发场景中，我们需要向某个页面传递参数。在uniapp中，可以通过在路由路径后面加上查询参数的方式来传递参数，示例如下：


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

上述代码中，我们在路由路径后面使用了查询参数的方式，将id设为1，将name设为uniapp。在被跳转的页面中，我们可以通过uni.getStorageSync(‘id’)、uni.getStorageSync(‘name’)等方法获取传递的参数信息。

然而，当要传递的参数较多时，使用查询参数的方式就比较麻烦。此时，我们可以使用uniapp路由的另一种方式——传递对象参数。

传递对象参数的方式与传递查询参数类似，只是需要将参数封装到一个对象中。如下所示：


// 在主页中定义需要传递的对象参数
let params = {id:1,name:"uniapp"}
// 点击按钮，跳转到test页面，并将参数传递过去
uni.navigateTo({
  url:'/pages/test/test?id='+JSON.stringify(params)
})

注意，在这里我们需要将参数对象转换为字符串，在跳转时记住解析这个字符串。可以在跳转后，通过字符串转换为JSON对象，再对其进行操作。


// test页面，获取对象参数
onLoad:function(options){
  let params=JSON.parse(options.id);
  console.log(params)
}

uniapp路由传递数值和数组参数

除了传递对象参数之外，uniapp路由还支持传递数值和数组参数。

如果想传递一个单一的数值，也可以使用路由路径后面加查询参数的方式来实现。

比如：


uni.navigateTo({
  url: '/pages/test/test?id=1'
})

然后，在test页面中，我们可以通过uni.getStorageSync(‘id’)方法来获取这个数值。

如果想传递一个数组参数，可以按照传递对象参数的方式，将该数组与其他参数封装到一个对象中。如下所示：


// 在主页中定义需要传递的对象参数
let arr = [1,2,3]
// 点击按钮，跳转到test页面，并将参数传递过去
uni.navigateTo({
  url:'/pages/test/test?id='+JSON.stringify({arr:arr})
})

在test页面中，我们可以通过JSON.parse(options.id).arr来获取这个数组参数。

总结

通过本文我们简要了解了uniapp实现带参数跳转的方法。我们可以通过路由路径后面加查询参数、传递对象参数、传递数值参数、传递数组参数等方式来实现参数传递，以满足不同开发场景的需求。

uniapp路由怎么实现带参数的跳转