在 UniApp 中,页面跳转主要可以通过两种方式实现:使用 <navigator>
组件和调用 UniApp 提供的导航 API。以下是这两种方式的详细说明:
1. 使用 <navigator>
组件
<navigator>
组件允许你在页面上创建一个可点击的元素,点击后会跳转到指定的页面。
html复制代码
|---|--------------------------------------------------------------------------------------------|
| | <navigator url="/pages/targetPage/targetPage" open-type="navigate">点击跳转到目标页面</navigator>
|
url
属性指定了要跳转的页面路径,open-type
属性定义了跳转的方式,比如 navigate
表示保留当前页面,跳转到应用内的某个页面。
2. 使用 UniApp 导航 API
UniApp 提供了一系列导航 API,用于在 JavaScript 代码中控制页面跳转。以下是一些常用的导航 API:
uni.navigateTo(OBJECT)
:保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack
可以返回到原页面。
javascript复制代码
|---|----------------------------------------|
| | uni.navigateTo({
|
| | url: '/pages/targetPage/targetPage'
|
| | });
|
uni.redirectTo(OBJECT)
:关闭当前页面,跳转到应用内的某个页面。
javascript复制代码
|---|----------------------------------------|
| | uni.redirectTo({
|
| | url: '/pages/targetPage/targetPage'
|
| | });
|
uni.reLaunch(OBJECT)
:关闭所有页面,打开到应用内的某个页面。
javascript复制代码
|---|----------------------------------------|
| | uni.reLaunch({
|
| | url: '/pages/targetPage/targetPage'
|
| | });
|
uni.switchTab(OBJECT)
:跳转到 tabBar 页面,并关闭其他非 tabBar 页面。
javascript复制代码
|---|----------------------------------------|
| | uni.switchTab({
|
| | url: '/pages/tabBarPage/tabBarPage'
|
| | });
|
uni.navigateBack(OBJECT)
:关闭当前页面,返回上一页面或多级页面。
javascript复制代码
|---|------------------------------------------------|
| | uni.navigateBack({
|
| | delta: 1 // 返回的页面数,如果 delta 大于现有页面数,则返回到首页。
|
| | });
|
在使用这些 API 时,请确保提供的 url
路径是正确的,并且目标页面已经在项目的 pages.json
文件中声明。
注意事项:
- 路径可以是绝对路径,也可以是相对路径。绝对路径以
/
开头,表示从项目根目录开始的路径;相对路径则相对于当前页面的路径。 - 路径后面可以附带查询参数,如
/pages/targetPage/targetPage?param1=value1¶m2=value2
,在目标页面中可以通过this.$route.query
来获取这些参数。 - 如果需要跳转到外部链接,可以使用
<a>
标签或者uni.openUrl
API。 - 在使用 API 进行页面跳转时,建议进行错误处理,以处理可能出现的异常情况,比如路径错误或页面不存在等。