文章目录
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
});
delta：返回的页面数，如果 delta 大于现有页面数，则返回到首页。
