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
});

delta：返回的页面数，如果 delta 大于现有页面数，则返回到首页。

uni-app 路由跳转方式_uni.redirectto-CSDN博客