uniapp怎么进行页面的跳转
在 UniApp 中，页面的跳转主要通过 navigator 组件或者 API 调用实现。以下是几种常见的页面跳转方法：
- 使用 组件
组件是页面链接的组件，类似于 HTML 中的 标签。你可以通过 url 属性指定要跳转到的页面路径。
html复制代码
| 跳转到详情页 |
注意： 组件不能跳转到带有 tabBar 的页面。
2. 使用 uni.navigateTo 方法
uni.navigateTo 用于保留当前页面，跳转到应用内的某个页面，使用 uni.navigateBack 可以返回到原页面。
javascript复制代码
| uni.navigateTo({ | |
| url: '/pages/detail/detail?id=1' | |
| }); |
- 使用 uni.redirectTo 方法
uni.redirectTo 用于关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到带 tabBar 的页面。
javascript复制代码
| uni.redirectTo({ | |
| url: '/pages/detail/detail?id=1' | |
| }); |
- 使用 uni.reLaunch 方法
uni.reLaunch 用于关闭所有页面，打开到应用内的某个页面。
javascript复制代码
| uni.reLaunch({ | |
| url: '/pages/detail/detail?id=1' | |
| }); |
- 使用 uni.switchTab 方法
uni.switchTab 用于跳转到 tabBar 页面，并关闭其他非 tabBar 页面。
javascript复制代码
| uni.switchTab({ | |
| url: '/pages/index/index' | |
| }); |
- 使用 uni.navigateBack 方法
uni.navigateBack 用于关闭当前页面，返回上一页面或多级页面。可通过 delta 控制返回的层数。
javascript复制代码
| uni.navigateBack({ | |
| delta: 1 | |
| }); |
- 使用 uni.preloadPage 方法
uni.preloadPage 用于预加载页面，是一种优化手段，被预加载的页面在下次打开时，速度更快。
javascript复制代码
| uni.preloadPage({ | |
| url: '/pages/detail/detail?id=1' | |
| }); |
注意：以上 API 中的 url 参数是页面路径，路径后可以带参数，参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔。如：/pages/detail/detail?id=1&name=uniapp。
在页面中可以通过 this.$route.query 来获取这些参数。例如，在 detail 页面中，你可以通过 this.$route.query.id 来获取 id 参数的值。
