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

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 // 返回层数
})
相关推荐
人衣aoa5 小时前
Python编程基础(八) | 类
开发语言·python
AlexMercer10125 小时前
[前端]1.html基础
前端·笔记·学习·html
晚云与城5 小时前
今日分享:C++ Stack和queue(栈与队列)
开发语言·c++
白水清风5 小时前
关于Js和Ts中类(class)的知识
前端·javascript·面试
前端Hardy5 小时前
只用2行CSS实现响应式布局,比媒体查询更优雅的布局方案
javascript·css·html
小莞尔5 小时前
【51单片机】【protues仿真】基于51单片机停车场的车位管理系统
c语言·开发语言·单片机·嵌入式硬件·51单片机
张烫麻辣亮。5 小时前
golang-gin包
开发语言·golang·gin
yuluo_YX6 小时前
Go Style 代码风格规范
开发语言·后端·golang
小菜全6 小时前
uniapp基础组件概述
前端·css·vue.js·elementui·css3