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 // 返回层数
})
相关推荐
乱飞的秋天14 小时前
C++中的特殊成员函数
开发语言·c++
史上最菜开发15 小时前
a-input输入框,苹果电脑(MAC)输入法的输入Bug
vue.js·macos·bug
怕冷的火焰(~杰)15 小时前
yarn安装electron和better-sqlite3失败问题(rebuild:better-sqlite3)
前端·javascript·electron
小严家15 小时前
Flutter完整开发指南 | Flutter&Dart – The Complete Guide
开发语言·flutter
宇宙的尽头是PYTHON15 小时前
用生活中的实例解释java的类class和方法public static void main
java·开发语言·生活
IT_陈寒15 小时前
JavaScript性能优化:7个90%开发者不知道的V8引擎黑科技
前端·人工智能·后端
摸鱼的春哥15 小时前
“全栈模式”必然导致“质量雪崩”!和个人水平关系不大
前端·javascript·后端
道传科技上位机15 小时前
C# 循环和条件用法大全(while dowhile for foreach if Switch try)全站最全
开发语言·c#
寻星探路15 小时前
Java EE初阶启程记04---线程的状态
java·开发语言·jvm·java-ee
努力也学不会java15 小时前
【Java并发】揭秘Lock体系 -- 深入理解ReentrantLock
java·开发语言·人工智能·python·机器学习·reentrantlock