uni-app几种常见的页面跳转方式

在 uni-app 中，页面跳转是常见的功能之一，主要用于实现不同页面之间的导航和交互。根据不同的需求和场景，uni-app 提供了多种页面跳转方式，主要包括以下几种方法： ### 1. 使用 `<navigator>` 组件 `<navigator>` 是 uni-app 提供的内置组件，用于在页面模板中实现跳转，类似于 HTML 中的 `<a>` 标签。它支持多种跳转类型，并且适用于大多数页面导航场景。 - **普通跳转**：使用 `open-type="navigate"` 实现跳转到非 tabBar 页面。 ```html <navigator url="/pages/detail/detail?id=123" open-type="navigate">跳转到详情页</navigator> ``` - **跳转到 tabBar 页面**：使用 `open-type="switchTab"` 实现跳转到 tabBar 页面。 ```html <navigator url="/pages/home/home" open-type="switchTab">跳转到首页</navigator> ``` ### 2. 使用 JavaScript API 实现跳转 uni-app 提供了一系列 JavaScript API 来实现页面跳转，这些 API 更适合在逻辑处理中动态控制页面导航。 - **`uni.navigateTo`**：保留当前页面，跳转到新页面，用户可以通过返回按钮返回上一页。 ```javascript uni.navigateTo({ url: '/pages/detail/detail' }); ``` - **`uni.redirectTo`**：关闭当前页面，跳转到非 tabBar 页面，用户无法通过返回按钮返回到原页面。 ```javascript uni.redirectTo({ url: '/pages/login/login' }); ``` - **`uni.switchTab`**：跳转到 tabBar 页面，同时关闭其他非 tabBar 页面。 ```javascript uni.switchTab({ url: '/pages/home/home' }); ``` - **`uni.reLaunch`**：关闭所有页面，打开指定页面，常用于重新加载应用主界面。 ```javascript uni.reLaunch({ url: '/pages/index/index' }); ``` - **`uni.navigateBack`**：返回上一级页面或指定层级的页面。 ```javascript uni.navigateBack({ delta: 1 // 返回上一级页面 }); ``` ### 3. 使用 `<uni-link>` 组件 `<uni-link>` 是 uni-app 的扩展组件，可以实现页面跳转，通常用于需要携带参数的情况。 ```html <uni-link href="../index/index?para=1688" text="Go to another page (uni-link)"></uni-link> ``` 该组件支持传参，并且在跨平台兼容性上有更好的表现。 ### 4. 页面传参与接收参数 页面跳转时，可以通过 URL 携带参数，例如： ```html <navigator url="/pages/detail/detail?id=123&name=test">跳转到详情页</navigator> ``` 目标页面可以通过 `onLoad` 生命周期函数接收参数： ```javascript onLoad(options) { console.log(options.id); // 输出 123 console.log(options.name); // 输出 test } ``` ### 5. 跳转方式的区别 - **`navigateTo` 和 `navigateBack`**：适用于需要保留页面栈并允许用户返回的场景。 - **`redirectTo`**：适用于替换当前页面，不需要用户返回的场景。 - **`switchTab`**：专门用于跳转到 tabBar 页面。 - **`reLaunch`**：适用于需要完全重置页面栈的场景，比如从深层页面直接跳转到首页。 ###