文章目录
- 一、uniapp页面跳转方法汇总
- 1. uni.navigateTo
- 2. uni.redirectTo
- 3. uni.reLaunch
- 4. uni.switchTab
- 5. uni.navigateBack
- 二、encodeURIComponent转码的使用场景
- 1. 参数中有特殊字符时
- 2. 参数值可能变化时
一、uniapp页面跳转方法汇总
1. uni.navigateTo
保留当前页面,跳转到应用内的某个页面。使用示例如下:
uni.navigateTo({url: '/pages/detail/detail?id=1&name=测试'
});
通过这种方式跳转后,用户可以点击左上角的返回按钮回到上一页。适用于需要在多个页面间灵活切换,且保留当前页面状态的场景,比如从商品列表页跳转到商品详情页。
2. uni.redirectTo
关闭当前页面,跳转到应用内的某个页面。
uni.redirectTo({url: '/pages/login/login'
});
这种跳转方式会销毁当前页面,常用于登录成功后,从登录页面跳转到首页,避免用户通过返回按钮又回到登录前的状态。
3. uni.reLaunch
关闭所有页面,打开到应用内的某个页面。
uni.reLaunch({url: '/pages/home/home'
});
一般在应用的一些关键流程节点使用,比如用户注销登录后,直接回到应用首页,清除之前所有的页面栈。
4. uni.switchTab
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。
uni.switchTab({url: '/pages/tabbar/home/home'
});
适用于在底部导航栏的不同页面间切换,比如从个人中心页面切换到首页。
5. uni.navigateBack
关闭当前页面,返回上一页面或多级页面。可通过delta
参数指定返回的页面数。
// 返回上一页
uni.navigateBack();
// 返回上三级页面
uni.navigateBack({delta: 3
});
二、encodeURIComponent转码的使用场景
不管是哪种页面跳转方法,只要涉及到页面间传参,就可能用到encodeURIComponent
转码。
1. 参数中有特殊字符时
当传递的参数包含特殊字符,像中文、&
、=
、?
等,就容易出现问题。以uni.navigateTo
为例:
let desc = '这是一个包含&符号的描述';
uni.navigateTo({url: '/pages/detail/detail?desc=' + desc
});
在目标页面获取的desc
参数可能并非预期内容,因为&
在URL中有特殊用途,会导致参数解析错误。此时,需要用encodeURIComponent
进行转码:
let desc = '这是一个包含&符号的描述';
let content = encodeURIComponent(desc);
uni.navigateTo({url: '/pages/detail/detail?desc=' + content
});
在目标页面获取参数后,再用decodeURIComponent
解码:
onLoad: function(options) {let content = decodeURIComponent(options.desc);console.log(content);
}
2. 参数值可能变化时
即便当前参数不包含特殊字符,但如果参数值未来可能发生变化并包含特殊字符,为防患于未然,也建议提前转码。
总之,在uniapp页面跳转传参时,只要参数有包含特殊字符的可能性,就应使用encodeURIComponent
进行转码,确保参数准确无误地传递和解析,让应用的页面跳转和数据交互更加稳定可靠。