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

配置路由：