页面跳转进行数据传递是一个必不可少的功能，有很多应用场景需要使用

比如买商品的流程是“选择商品” -> “购物车” -> “物流信息” -> “确认订单”，所以在这几个不同页面进行跳转的时候，相应的数据也需要传递下去

在android中，我们可以用Intent 来进行数据的传递，新界面通过getIntent来进行获取

在IOS中，一般是通过controller 的属性来进行传值

在React-Native中，可以在navigator.push 方法传递对象

上面三种进行数据的传递都很简单，而且也很方法。

而在小程序中，我们可以看到，页面跳转和传递数据是通过

代码实现

1. wx.navigateTo({
2. url: 'page?a=1&b=2',
3. success: function (res) {
4. // success
5.  
6. },
7. fail: function (err) {
8. // fail
9. },
10. complete: function () {
11. // complete
12. }
13. });

他是通过url字段来控制跳转的页面，同时路径“?”后面的表示传递的参数，这跟http的GET请求传参一致

在新页面获取参数信息也很简单

1. Page({
2. data: {},
3. onLoad: function(options) {
4. console.log(options)
5. }
6. });

可以直接在每个页面的onLoad 回调中来进行获取。

看了上面的代码，你会疑问这不是很简单吗？还需要你来说吗？两句代码搞定的事

确实，如果你只是做简单的数据传递是很简单

但是，回到最上面说的那个问题，如果页面层级比较多，数据比较多且复杂的时候，你会抓狂，因为wx.navigateTo 的url自动是String类型，也就是说你不能直接传递对象，如果数据很多的话，会是一件很痛苦的事

1. wx.navigateTo({
2. url: "page?productId=1&count=2&name=zhangzy&phone=13488888888&address=xxx"
3. });

代码可读性极差而且非常繁琐，万一那个字段忘记拼进去，很容易出bug

所以，我们必须要做改变，需要优化

结合上篇文章《返回上级页面并传递数据》封装另外一个大同小异的方法

1. class Router {
2.  
3. navigateTo(obj) {
4. wx.navigateTo({
5. url: obj.url,
6. success: function (res) {
7. // success
8. obj.success && obj.success(res);
9. if (obj.data) {
10. setTimeout(() => {
11. let pages = getCurrentPages()
12. let curPage = pages[pages.length - 1];
13. if(curPage.startPageForData) {
14. curPage.startPageForData(obj.data);
15. } else {
16. curPage.setData(obj.data);
17. }
18. }, 1000);
19.  
20. }
21. },
22. fail: function (err) {
23. // fail
24. obj.fail && obj.fail(res);
25. },
26. complete: function () {
27. // complete
28. obj.complete && obj.complete();
29. }
30. });
31.  
32. }
33. }
34.  
35. Router = new Router();
36. module.exports = Router;

实际上还是基于微信提供的wx.navigateTo接口，在跳转成功之后，我们获取页面栈里面最上层的一个，也就是最新打开的那个页面，从而进行数据绑定或是执行对应的startPageForData方法，上面我们加了1000毫秒的延时，主要是当页面跳转之后，可能没那么快注册的栈里面，不延时可能获取的还是之前页面数