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

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 // 返回层数
})