uni-app路由传参以及onLoad( )参数接收?

1,314 阅读1分钟

在uni-app中,可以通过路由传参的方式将参数传递给目标页面,并在目标页面中接收这些参数。具体操作如下:

  1. 在跳转页面时,可以使用uni.navigateTo()uni.redirectTo()等路由跳转方法,并将参数作为query参数传递给目标页面。例如:
uni.navigateTo({
  url: '/pages/targetPage/targetPage?id=123&name=foo'
});
  1. 在目标页面的onLoad生命周期函数中,可以通过options参数来接收传递的参数。例如:
export default {
  onLoad(options) {
    console.log(options.id);   // 输出:123
    console.log(options.name); // 输出:foo
  }
}

需要注意的是,传递的参数会被作为query参数附加在目标页面的URL中。在目标页面中,可以通过options参数来获取这些参数的值。options是一个对象,它包含了路由跳转时传递的参数。

如果需要在目标页面中动态更新参数,可以通过监听uni.onAppRoute()方法来获取最新的参数。例如:

uni.onAppRoute((route) => {
  console.log(route.query.id);   // 输出最新的id参数值
  console.log(route.query.name); // 输出最新的name参数值
});

通过以上操作,可以实现在uni-app中进行路由传参,并在目标页面中接收和使用这些参数。