uniapp中页面跳转及encodeURIComponent转码的使用详解

一、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进行转码，确保参数准确无误地传递和解析，让应用的页面跳转和数据交互更加稳定可靠。