路由 / 路由报错
uni-app 2019-04-10 09:23:20

路由

API 说明
uni.navigateTo 保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面
uni.redirectTo 关闭当前页面,跳转到应用内的某个页面
uni.reLaunch 关闭所有页面,打开到应用内的某个页面
uni.switchTab 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
uni.navigateBack 关闭当前页面,返回上一页面或多级页面

 

 

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

OBJECT参数说明

参数 类型 必填 默认值 说明 平台支持度
url String   需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 'path?key=value&key2=value2',path为下一个页面的路径,下一个页面的onLoad函数可得到传递的参数 :-
animationType String pop-in 窗口显示的动画效果,详见:窗口动画 5+App
animationDuration Number 300 窗口动画持续时间,单位为 ms 5+App
success Function   接口调用成功的回调函数  
fail Function   接口调用失败的回调函数  
complete Function   接口调用结束的回调函数(调用成功、失败都会执行)  
XML/HTML Code复制内容到剪贴板
  1. uni.navigateTo({  
  2.     url: 'test?id=1&name=uniapp'  
  3. });  

 

 

XML/HTML Code复制内容到剪贴板
  1. // test.vue  
  2. export default {  
  3.     onLoad: function (option) { //option为object类型,会序列化上个页面传递的参数  
  4.         console.log(option.id); //打印出上个页面传递的参数。  
  5.         console.log(option.name); //打印出上个页面传递的参数。  
  6.     }  
  7. }  

 

页面跳转路径有层级限制,不能无限制跳转新页面

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

 

 

uni.redirectTo(OBJECT)

关闭当前页面,跳转到应用内的某个页面。

OBJECT参数说明

参数 类型 必填 说明
url String 需要跳转的应用内非 tabBar 的页面的路径,路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 'path?key=value&key2=value2'
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)
XML/HTML Code复制内容到剪贴板
  1. uni.redirectTo({  
  2.     url: 'test?id=1'  
  3. });  

 

 

uni.reLaunch(OBJECT)

关闭所有页面,打开到应用内的某个页面。

OBJECT参数说明

参数 类型 必填 说明
url String 需要跳转的应用内页面路径 , 路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 'path?key=value&key2=value2',如果跳转的页面路径是 tabBar 页面则不能带参数
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

 

XML/HTML Code复制内容到剪贴板
  1. uni.reLaunch({  
  2.     url: 'test?id=1'  
  3. });  

 

XML/HTML Code复制内容到剪贴板
  1. export default {  
  2.     onLoad: function (option) {  
  3.         console.log(option.id);  
  4.     }  
  5. }  

 

uni.switchTab(OBJECT)

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

OBJECT参数说明

参数 类型 必填 说明
url String 需要跳转的 tabBar 页面的路径(需在 pages.json 的 tabBar 字段定义的页面),路径后不能带参数
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

示例

pages.json

JavaScript Code复制内容到剪贴板
  1. {  
  2.   "tabBar": {  
  3.     "list": [{  
  4.       "pagePath""pages/index/index",  
  5.       "text""首页"  
  6.     },{  
  7.       "pagePath""pages/other/other",  
  8.       "text""其他"  
  9.     }]  
  10.   }  
  11. }  

other.vue

JavaScript Code复制内容到剪贴板
  1. uni.switchTab({  
  2.     url: '/pages/index/index'  
  3. });  

 

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

OBJECT参数说明

参数 类型 必填 默认值 说明 平台支持度
delta Number 1 返回的页面数,如果 delta 大于现有页面数,则返回到首页。  
animationType String pop-out 窗口关闭的动画效果,详见:窗口动画 5+App
animationDuration Number 300 窗口关闭动画的持续时间,单位为 ms 5+App

示例

JavaScript Code复制内容到剪贴板
  1. // 注意:调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,而 redirectTo 方法则不会。见下方示例代码  
  2.   
  3. // 此处是A页面  
  4. uni.navigateTo({  
  5.     url: 'B?id=1'  
  6. });  
  7.   
  8. // 此处是B页面  
  9. uni.navigateTo({  
  10.     url: 'C?id=1'  
  11. });  
  12.   
  13. // 在C页面内 navigateBack,将返回A页面  
  14. uni.navigateBack({  
  15.     delta: 2  
  16. });  

 

Tips:

  • navigateToredirectTo 只能打开非 tabBar 页面。
  • switchTab 只能打开 tabBar 页面。
  • reLaunch 可以打开任意页面。
  • 页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有 tabBar
  • 不能在 App.vue 里面进行页面跳转。

窗口动画

1.6.5 新增

窗口的显示/关闭动画效果,支持在 API、组件、pages.json 中配置,优先级为:API = 组件 > pages.json

API

有效的路由 API

  • navigateTo
  • navigateBack

 

JavaScript Code复制内容到剪贴板
  1. uni.navigateTo({  
  2.     url: '../test/test',  
  3.     animationType: 'pop-in',  
  4.     animationDuration: 200  
  5. });  
  6. uni.navigateBack({  
  7.     delta: 1,  
  8.     animationType: 'pop-out',  
  9.     animationDuration: 200  
  10. });  

 

组件

open-type 有效值

  • navigateTo
  • navigateBack
XML/HTML Code复制内容到剪贴板
  1. <navigator animation-type="pop-in" animation-duration="300" url="../test/test">navigator</navigator>  
  2. <navigator animation-type="pop-out" animation-duration="300" open-type="navigateBack" >navigator</navigator>  
pages.json

pages.json 中配置的是窗口显示的动画

JavaScript Code复制内容到剪贴板
  1. "style": {  
  2.     "app-plus": {  
  3.         "animationType""fade-in",  
  4.         "animationDuration": 300  
  5.     }  
  6. }  

 

显示动画与关闭动画,会有默认的对应规则。但是如果通过 API 或组件配置了窗口关闭的动画类型,则不会使用默认的类型。

显示动画 关闭动画
slide-in-right slide-out-right
slide-in-left slide-out-left
slide-in-top slide-out-top
slide-in-bottom slide-out-bottom
fade-in fade-out
zoom-out zoom-in
zoom-fade-out zoom-fade-in
pop-in pop-out

详细的窗口动画说明,请参考:

 

 

 

报错1、加跳转链接出现:navigateTo:fail can not navigateTo a tabbar page / navigator

如果在这种情况下无法实现跳转并出现can not navigate to tabBar page错误,很有可能是由于在底部tabbar里面定义乐同样连接地址的bar,如果在底部footer页面定义了相同地址的bar,则此页面无法跳转,最好是当tabbar定义了相同的跳转地址在页面中不要再定义相同的链接了。

XML/HTML Code复制内容到剪贴板
  1. <navigator url="../notice/index">{{item.title}}</navigator>  
  2.   
  3.   
  4. <script>  
  5.             uni.reLaunch({  
  6.                 url: '../main/main'  
  7.             });  
  8.   
  9.             // 设置路径重复,所以报错  
  10. //          uni.navigateTo({  
  11. //              url: '../main/main'  
  12. //          });  
  13. </script>  

 

 

 

本文来自于:http://www.yoyo88.cn/study/uniapp/422.html

Powered by yoyo苏ICP备15045725号