uni-app 页面传参实战

页面跳转

保留当前页面并跳转新页面

保留当前页面,跳转到应用内的某个页面,使用 uni.navigateBack可以返回到原页面。

例子:

跳转到 test 文件夹下的 test 页面

uni.navigateTo({
    url: '../test/test'
});

不保留当前页面并跳转新页面

关闭当前页面,跳转到应用内的某个页面。

例子:

跳转到 test 文件夹下的 test 页面

uni.redirectTo({
    url: '../test/test'
});

关闭所有页面并打开一个页面

关闭所有页面,打开到应用内的某个页面。

例子:

跳转到 test 文件夹下的 test 页面

uni.reLaunch({
    url: '../test/test'
});

跳转到 tabBar 页面

只能使用 switchTab 跳转,并关闭其他所有非 tabBar 页面。

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

other.vue 页面切换
uni.switchTab({
    url: '/pages/index/index'
});

返回上一个页面或者返回第几个页面

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

// 注意:调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,而 redirectTo 方法则不会。见下方示例代码

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

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

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

页面传参

  • 现在