uni-app页面跳转

2024年8月6日

https://uniapp.dcloud.net.cn/api/router.html#navigateto

非tabBar页面跳转

可用多种方式进行跳转，区别在于对其他页面的处理方式。

1. uni.navigateTo(OBJECT)
   保留当前页面，跳转到应用内的某个非tabBar页面，使uni.navigateBack可以返回到原页面。
2. uni.redirectTo(OBJECT)
   关闭当前页面，跳转到应用内的某个非tabBar页面。
3. uni.reLaunch(OBJECT)
   关闭所有页面，打开到应用内的某个页面
4. uni.navigateBack(OBJECT)
   关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

# 示例

在起始页面跳转到test.vue页面并传递参数

uni.navigateTo({
        url: 'test?id=1&name=uniapp'
});

在test.vue页面接受参数

export default {
        onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
                console.log(option.id); //打印出上个页面传递的参数。
                console.log(option.name); //打印出上个页面传递的参数。
        }
}

调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。

// 此处是A页面
uni.navigateTo({
        url: 'B?id=1'
});

// 此处是B页面
uni.navigateTo({
        url: 'C?id=1'
});

// 在C页面内 navigateBack，将返回A页面
uni.navigateBack({
        delta: 2
});

tabBar页面跳转

uni.switchTab(OBJECT):
关闭所有页面，打开到应用内的某个页面。

参数

url String 必填 需要跳转的路径要在pages.json的tabBar字段定义，路径不能带参数

示例

pages.json
{
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    },{
      "pagePath": "pages/other/other",
      "text": "其他"
    }]
  }
}

跳转

uni.switchTab({
        url: '/pages/index/index'
});