uni-app路由跳转（uni-app路由跳转）

uni-app有两种方式进行路由跳转,下面这篇文章主要给大家介绍了关于uniapp常用路由跳转的几种方式(navigateTo             、redirectTo...),文中通过实例代码介绍的非常详细,需要的朋友可以参考下

1. uni.navigateTo 保留当前页面             ，跳转到应用内的某个页面  
 
  
 
  
 
  
 
  
 
  
 
  
 ，使用uni.navigateBack可以返回到原页面
  
  
  
  
  
  
  。

示例代码如下：

uni.navigateTo({ url:./home/index });

注意：

页面跳转路径有层级限制













，不能无限制跳转新页面跳转到 tabBar 页面只能使用 

switchTab 跳转路由API的目标页面

必须是在pages.json里注册的vue页面 
  
  
  
  
  
  
。如果想打开web url
  
  
  
  
  
  
 ，具体可参考【uniapp官方-路由与页面跳转】

2. uni.navigateBack（关闭当前页面  
  
  
  
  
  
  ，返回上一页面或多级页面）

示例代码如下：

// 在第3级页面内 navigateBack
 


 


 


 


 


 


 

，将返回第一层页面 uni.navigateBack({ delta: 2 });

注意：

可通过 getCurrentPages()方法 获取当前的页面栈
 
 
 
 
 
 
，决定需要返回几层 


 


 


 


 


 


 

。 常用参数delta   
   
   
   
   
   
   ，默认为1
 

 

 

 

 

 

 
，含义是：返回的页面数

 

 

 

 

 

 

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

3. redirectTo（关闭当前页面
 
 

 
 

 
 

 
 

 
 

 
 

 
 ，跳转到其他页面）

示例代码如下：

uni.redirectTo({ url:./home/index })

注意：

需要跳转的应用内非 tabBar 的页面的路径













，路径后可以带参数  
   
   
   
   
   
   
。参数与路径之间使用?分隔                    ，参数键与参数值用=相连 
 
 
 
 
 
 
 
 
 
 
 
 
 ，不同参数用&分隔；如 ‘path?key=value&key2=value2’ 转到 tabBar 页面只能使用 switchTab 跳转

4. reLaunch（关闭所有页面




















，跳转到其他页面）

示例代码如下：

uni.reLaunch({ url:./home/index })

注意：

需要跳转的应用内页面的路径             ，路径后可以带参数 

 

 

 

 

 

 
。参数与路径之间使用?分隔  
 
  
 
  
 
  
 
  
 
  
 
  
 ，参数键与参数值用=相连













，不同参数用&分隔；如 ‘path?key=value&key2=value2’ 转到 tabBar 页面则不能带参数 H5端调用uni.reLaunch之后之前页面栈会销毁
  
  
  
  
  
  
 ，但是无法清空浏览器之前的历史记录  
  
  
  
  
  
  ，此时navigateBack不能返回
 


 


 


 


 


 


 

，如果存在历史记录的话点击浏览器的返回按钮或者调用history.back()仍然可以导航到浏览器的其他历史记录

 

 

 

 

 

 

 。 如果调用了 uni.preloadPage() 不会关闭
 
 
 
 
 
 
，仅触发生命周期 onHide

5. switchTab（适用于底部导航栏之间的跳转   
   
   
   
   
   
   ，或者跳转到底部导航栏（跳转到 tabBar 页面
 

 

 

 

 

 

 
，并关闭其他所有非 tabBar 页面             。））

示例代码如下：

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

注意：

需要跳转的 tabBar 页面的路径（需在 pages.json 的 tabBar 字段定义的页面）

 

 

 

 

 

 

，路径后不能带参数

更多细节              ，可参考：【uniapp官方-路由与页面跳转】

补充：uni-app中的一些路由跳转区别

总结一下

navigateTo,redirectTo只能打开非tabBar页面(例如列表到详情)

switchTab只能打开tabBar页面(tabBar之间的传参等)

reLaunch可以打开任意页面

页面底部的tabBar由页面决定,就是只要时定义为tabBar的页面,底部都有tabBar,不能再App.vue里面进行页面跳转

uni.navigateTo({ url:跳转的路径?id=xxx&alue=xxx, }) 传递的参数在跳转到的页面可以在onLoad:function(option){ option就是传递的参数 }

需要跳转的应用内非tabBar的页面,其实就是在pages.json里面配置的页面都不能跳转详情请看官网uni-app路由跳转

注意：

1:页面跳转路径有层级限制
 
 

 
 

 
 

 
 

 
 

 
 

 
 ，不能无限制跳转新页面

2:跳转到 tabBar 页面只能使用 switchTab 跳转

uni.redirectTo({

url:跳转的路径

需要跳转的应用内非tabBar的页面的路径,

})

注意是关闭当前页面,跳转到应用内的某个页面,跳转到 tabBar 页面只能使用 switchTab 跳转

1

2

3

uni.reLaunch({

url: test?id=1

});

关闭所有页面













，打开到应用内的某个页面 
 

 
 

 
 

 
 

 
 

 
 

 
 
。如果跳转的页面路径是 tabBar 页面则不能带参数













。

1

2

3

4

uni.switchTab({

url: /pages/index/index

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

});

跳转到 tabBar 页面 
 
 
 
 
 
 
 
 
 
 
 
 
 ，并关闭其他所有非 tabBar 页面                    。

1

2

3

4

5

6

7

8

9

10

11

12

// 此处是A页面

uni.navigateTo({

url: B?id=1

});

// 此处是B页面

uni.navigateTo({

url: C?id=1

});

// 在C页面内 navigateBack




















，将返回A页面

uni.navigateBack({

delta: 2

});

关闭当前页面             ，返回上一页面或多级页面 
 
 
 
 
 
 
 
 
 
 
 
 
 
。可通过 getCurrentPages() 获取当前的页面栈  
 
  
 
  
 
  
 
  
 
  
 
  
 ，决定需要返回几层



















。