UniApp Vue3 模式下实现页面跳转的全面指南
1. 引言
1.1 UniApp 与 Vue3 的结合优势
UniApp 是一个使用 Vue.js 开发所有前端应用的框架，支持编译到 iOS、Android、H5、以及各种小程序平台。Vue3 提供了更高效的响应式系统和 Composition API，使开发体验更加现代化和灵活。
1.2 页面跳转在应用开发中的重要性
页面跳转是用户交互的核心功能之一，良好的跳转逻辑可以提升用户体验并增强应用结构的清晰度。
2. UniApp 原生导航 API 跳转方式
2.1 uni.navigateTo —— 保留当前页面跳转
uni.navigateTo({url: '/pages/targetPage/targetPage'
});
- 说明：保留当前页面，跳转到非 Tab 页面。
- 适用场景：点击按钮进入详情页等。
2.2 uni.redirectTo —— 关闭当前页面跳转
uni.redirectTo({url: '/pages/targetPage/targetPage'
});
- 说明：关闭当前页面，跳转到目标页面，不保留在页面栈中。
- 适用场景：表单提交后跳转。
2.3 uni.switchTab —— 跳转至 Tab 页面
uni.switchTab({url: '/pages/tabPage/tabPage'
});
- 说明：必须跳转到
app.json中注册为 Tab 的页面。 - 注意：不能携带参数。
2.4 uni.reLaunch —— 重新启动目标页面
uni.reLaunch({url: '/pages/homePage/homePage'
});
- 说明：关闭所有页面，打开指定页面。
- 适用场景：切换主界面或登出后重置页面栈。
2.5 uni.navigateBack —— 返回上一级或多级页面
uni.navigateBack({delta: 1 // 返回上一页
});
- 说明：返回上一页面或多级页面。
- 示例：
delta: 2表示返回上两级页面。
3. Vue Router 在 Vue3 模式下的使用（适用于 vue-router-enabled 项目）
3.1 引入 Vue Router 及其配置方法
确保你在创建项目时启用了 vue-router-enabled 模式：
npm install vue-router@next
配置路由：