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

路由跳转
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'
					})
				},
			})

好啦,还有很多方法都需要我们自己慢慢去摸索,希望这些可以帮到你。
在这里插入图片描述

点个赞在走呗~

猜你喜欢

转载自blog.csdn.net/m0_46156566/article/details/105517136
今日推荐