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