uni-app中的一些路由跳转区别

桃扇骨 2023-06-27 12:45 3阅读 0赞

#### uni-app中几种路由跳转 ####

**总结一下**  
navigateTo,redirectTo只能打开非tabBar页面(**例如列表到详情**)  
switchTab只能打开tabBar页面(**tabBar之间的传参等**)  
reLaunch可以打开任意页面  
页面底部的tabBar由页面决定,就是只要时定义为tabBar的页面,底部都有tabBar,  
不能再App.vue里面进行页面跳转

--------------------

uni.navigateTo({
    url:'跳转的路径?id=xxx&alue=xxx',
    })
    传递的参数在跳转到的页面可以在onLoad:function(option){
    option就是传递的参数
    }

**需要跳转的应用内非tabBar的页面,其实就是在pages.json里面配置的页面都不能跳转详情请看官网[uni-app路由跳转][uni-app]**

**注意：**

1:页面跳转路径有层级限制，不能无限制跳转新页面
    2:跳转到 tabBar 页面只能使用 switchTab 跳转

--------------------

uni.redirectTo({
    url:'跳转的路径'
    需要跳转的应用内非tabBar的页面的路径,
    })

**注意是关闭当前页面,跳转到应用内的某个页面,跳转到 tabBar 页面只能使用 switchTab 跳转**

--------------------

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

**关闭所有页面，打开到应用内的某个页面。如果跳转的页面路径是 tabBar 页面则不能带参数。**

--------------------

uni.switchTab({
        url: '/pages/index/index'
        需要跳转的 tabBar 页面的路径（需在 pages.json 的 tabBar 字段定义的页面），路径后不能带参数
    });

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

--------------------

// 此处是A页面
    uni.navigateTo({
        url: 'B?id=1'
    });
    // 此处是B页面
    uni.navigateTo({
        url: 'C?id=1'
    });
    // 在C页面内 navigateBack，将返回A页面
    uni.navigateBack({
        delta: 2
    });

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

[uni-app]: https://uniapp.dcloud.io/api/router?id=navigateto