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

小菜全2025-09-09 18:43

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

新增页面配置

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

json 复制代码

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

创建页面文件

在pages目录下新建对应名称的文件夹（如detail），并创建.vue文件。文件结构示例：

复制代码

pages/
  detail/
    detail.vue

页面跳转方法

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

javascript 复制代码

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

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

javascript 复制代码

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

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

javascript 复制代码

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

传递参数处理

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

javascript 复制代码

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

返回上一页

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

javascript 复制代码

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