在 UniApp 中,页面的跳转主要通过 navigator
组件或者 API 调用实现。以下是几种常见的页面跳转方法:
- 使用
<navigator>
组件
<navigator>
组件是页面链接的组件,类似于 HTML 中的 <a>
标签。你可以通过 url
属性指定要跳转到的页面路径。
html复制代码
|---|-----------------------------------------------------------------|
| | <navigator url="/pages/detail/detail?id=1">跳转到详情页</navigator>
|
注意:<navigator>
组件不能跳转到带有 tabBar 的页面。
- 使用
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
参数的值。