欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

uni-app路由跳转以及页面传参的方法

程序员文章站 2022-05-31 10:55:50
...

路由跳转
uni-app官方给的路由跳转常用方法有以下三个;
1.uni.navigateTo
保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。,注意这里只用于跳转到子页面哦,tabbar跳转不要用这个,用switchTab。
用法代码示例

uni.navigateTo({
		url: '/pages/notice/notice'
})

2.uni.navigateBack
用于关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层。
用法代码示例

uni.navigateTo({
    url: '/pages/notice/notice'
});

3.uni.switchTab
用于跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面,只可以跳转tabbar页面,其他页面不支持哦,这里需要在page.json文件里配置跳转路径。
用法代码示例

//page.json文件配置
{
	"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页",  ////顶部导航名称
				"navigationBarBackgroundColor":"rgb(0,154,251)",//顶部导航背景色
				"navigationBarTextStyle":"white"//顶部导航字体颜色
			}
		},
	]
}
//页面用法
uni.switchTab({
    url: '/pages/index/index'
});

页面传参
好了说一下页面传参常用方法吧;
第一种:
直接在跳转页面的URL路径后面拼接,如果是数组或者json格式记得转成字符串格式哦。然后再目的页面onload里面接受即可,我个人习惯用onshow()接收
代码示例:

//现页面
 uni.navigateTo({
                    url:'./nav?index='+navData
                })
//目的页面接收
//这里onload如果无效,用onshow()也可以
        onLoad(options) {
            var data = JSON.parse(options.index); // 字符串转对象
            console.log(data)
        }

第二种:
直接在main.js注册全集常量或者设置本地存储也比较方便
代码示例

//在页面设置缓存
let data = {key:'name',value:'hello'}
uni.setStorage({
			key:'setName',
			data:data
			})
//在目的页面读取并销毁
uni.getStorage({
				key: 'setName',
				success: (res) => {
					console.log(res.data)  // ==>{key:'name',value:'hello'}
					uni.removeStorage({
						key:'setName'
					})
				},
			})

好啦,还有很多方法都需要我们自己慢慢去摸索,希望这些可以帮到你。
uni-app路由跳转以及页面传参的方法

点个赞在走呗~