uniapp新增页面及跳转配置方法

新增页面配置

在pages.json文件中配置新增页面路径,确保路径正确且文件名无冲突。例如新增一个detail页面:

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": { "navigationBarTitleText": "首页" }
    },
    {
      "path": "pages/detail/detail",
      "style": { "navigationBarTitleText": "详情页" }
    }
  ]
}

创建页面文件

在pages目录下新建对应名称的文件夹(如detail),并创建.vue文件。文件结构示例:

pages/
  detail/
    detail.vue

页面跳转方法

使用uni.navigateTo进行普通跳转,保留当前页面:

uni.navigateTo({
  url: '/pages/detail/detail?id=123'
})

使用uni.redirectTo关闭当前页面跳转:

uni.redirectTo({
  url: '/pages/detail/detail'
})

使用uni.switchTab跳转到tabBar页面:

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

传递参数处理

在目标页面的onLoad生命周期中接收参数:

export default {
  onLoad(options) {
    console.log('接收参数:', options.id)
  }
}

返回上一页

使用uni.navigateBack实现返回功能:

uni.navigateBack({
  delta: 1 // 返回层数
})

Logo

北京人形旗下天工造物具身智能开源社区,聚焦具身天工与慧思开物两大平台

更多推荐