路由 / 路由报错
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：

  • navigateTo, redirectTo 只能打开非 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

上一篇 真机不报错，微信开发者工具报错$mp
下一篇 配置下拉刷新
相关的文章
Powered by yoyo苏ICP备15045725号