uni-app 路由跳转方式

文章目录

- navigator组件跳转
- API跳转
- - 1. uni.navigateTo（打开新页面）
  - 2. uni.redirectTo（页面重定向）
  - 3. uni.reLaunch（重加载）
  - 4. uni.switchTab（Tab 切换）
  - 5. uni.navigateBack（页面返回）

微信小程序中路由跳转方式

uni-app页面路由为框架统一管理，开发者需要在pages.json里配置每个路由页面的路径及页面样式。类似小程序在 app.json 中配置页面路由一样。所以 uni-app 的路由用法与 Vue Router 不同，如仍希望采用 Vue Router 方式管理路由，可在插件市场搜索 Vue-Router

uni-app 有两种页面路由跳转方式：

使用navigator组件跳转
调用API跳转

navigator组件跳转

该组件类似HTML中的<a>组件，但只能跳转本地页面。目标页面必须在pages.json中注册。

<navigator url="/pages/home/index?title=navigate">跳转到新页面</navigator>
<navigator url="/pages/home/index?title=redirect" open-type="redirect">在当前页打开</navigator>
<navigator url="/pages/home/index" open-type="switchTab">跳转tab页面</navigator>

在pages/home/index页面接受参数

export default {onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数console.log(option.title); //打印出上个页面传递的参数。}
}

open-type 有效值：

navigate：对应 uni.navigateTo 的功能
redirect：对应 uni.redirectTo 的功能
switchTab：对应 uni.switchTab 的功能
reLaunch：对应 uni.reLaunch 的功能
navigateBack：对应 uni.navigateBack 的功能
exit：退出小程序，target="miniProgram"时生效

API跳转

1. uni.navigateTo（打开新页面）

保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
新页面入栈
与组件 <navigator open-type="navigate"/> 一致

需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。
如 path?key=value&key2=value2，path为下一个页面的路径，下一个页面的onLoad函数可得到传递的参数

uni.navigateTo({url: '/pages/home/index?id=1&name=uniapp'
});

2. uni.redirectTo（页面重定向）

关闭当前页面，跳转到应用内的某个页面。
当前页面出栈，新页面入栈
与组件 <navigator open-type="redirectTo"/> 一致

需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。
如 path?key=value&key2=value2，path为下一个页面的路径

uni.redirectTo({url: '/pages/home/index?id=1&name=uniapp'
});

3. uni.reLaunch（重加载）

关闭所有页面，打开到应用内的某个页面。
页面全部出栈，只留下新的页面
与组件 <navigator open-type="reLaunch"/> 一致
如果调用了 uni.preloadPage(OBJECT) 不会关闭，仅触发生命周期 onHide

需要跳转的应用内页面路径 , 路径后可以带参数。
如 path?key=value&key2=value2，如果跳转的页面路径是 tabBar 页面则不能带参数

uni.reLaunch({url: '/pages/home/index?id=1&name=uniapp'
});

4. uni.switchTab（Tab 切换）

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
页面全部出栈，只留下新的 Tab 页面
与组件 <navigator open-type="switchTab"/> 一致、用户切换 Tab
如果调用了 uni.preloadPage(OBJECT) 不会关闭，仅触发生命周期 onHide

需要跳转的 tabBar 页面的路径（需在 pages.json 的 tabBar 字段定义的页面），路径后不能带参数

pages.json

{"tabBar": {"list": [{"pagePath": "pages/index/index","text": "首页"},{"pagePath": "pages/other/other","text": "其他"}]}
}

uni.switchTab({url: '/pages/index/index'
});

5. uni.navigateBack（页面返回）

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。
页面不断出栈，直到目标返回页
与组件 <navigator open-type="navigateBack"/> 一致、用户按左上角返回按钮、安卓用户点击物理back按键

// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈// 此处是A页面
uni.navigateTo({url: 'B?id=1'
});// 此处是B页面
uni.navigateTo({url: 'C?id=1'
});// 在C页面内 navigateBack，将返回A页面
uni.navigateBack({delta: 2
});