uni-app（最全）页面跳转和传递数据

uni-app页面跳转

刚做了一个uni-app的项目，在这总结一下跳转和传递数据

uni.navigateTo(OBJECT)

保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

参数
例子

uni.navigateTo({
    url: 'test?id=1&name=uniapp'   /*这是跳转到的页面路径，？id=1这些都是传递的数据，可以直接在test页面接受
});

接受数据代码如下：

onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
        console.log(option.id); //打印出上个页面传递的参数。
        console.log(option.name); //打印出上个页面传递的参数。
    }

uni.redirectTo(OBJECT)

关闭当前页面，跳转到应用内的某个页面。

参数
例子

uni.redirectTo({
    url: 'test?id=1'
});

uni.reLaunch(OBJECT)

关闭所有页面，打开到应用内的某个页面。

参数
例子

uni.reLaunch({
    url: 'test?id=1'
});

uni.switchTab(OBJECT)

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

参数
例子
pages.json

{
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    },{
      "pagePath": "pages/other/other",
      "text": "其他"
    }]
  }
}

other.vue

uni.switchTab({
    url: '/pages/index/index'
});

uni.navigateBack(OBJECT)

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

参数
例子

// 此处是A页面
uni.navigateTo({
    url: 'B?id=1'
});

// 此处是B页面
uni.navigateTo({
    url: 'C?id=1'
});

// 在C页面内 navigateBack，将返回A页面
uni.navigateBack({
    delta: 2
});

官网地址

uni-app传参

uni.setStorageSync(KEY,DATA)
将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。
可以直接将需要传递的数据本地存储起来，但是这种方法有很多弊端，只有在适合的情况下才能使用

参数
例子

try {
    uni.setStorageSync('storage_key', 'hello');
}

链接传参

这个方法用的比较多，直接在跳转到的链接后边加？传递的数据，上边也提到过。

例子

1.传递数字，字母等固定的值

uni.navigateTo({
				url:'页面路径?id=1'
			  		})
   /*****接收数据*****/
   
   在跳转到的页面下
   
   onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
        console.log(option.id); //打印出上个页面传递的参数。
    }

2.传递变量

uni.navigateTo({
						url:'页面路径?id= this.id'
					})

接收数据的方法都一样。