uniapp入门需要了解的知识(一):路由跳转

uni-app 是一个使用 Vue.js 开发所有前端应用的强大框架,特点是我们开发者只需要编写一套代码,就可以发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/快手/钉钉/淘宝)、快应用等多个平台。是当下十分流行的开发框架。

那么,我们开始使用uniapp时,是需要先了解一定的基础知识后才能快速稳定的做后续的代码编写工作。

此篇文字仅为 uniapp各个路由方法结合个人理解后的汇总笔记。

 

1、uni.navigateTo(OBJECT)  

这是最常用的页面路由跳转方法,特点是:保留当前页面,跳转到应用内的某个页面。  可以使用uni.navigateBack可以返回到原页面,此方法无法跳转到tabbar页面。常做兄弟页面或父子页面的路由跳转。

常用参数包括:

1)url  ->  需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 'path?key=value&key2=value2',path为下一个页面的路径,下一个页面的onLoad函数可得到传递的参数;

2)  success -> 接口调用成功的回调函数;

3)  fail -> 接口调用失败的回调函数

示例:

  uni.navigateTo({

    url: 'test?id=1&name=uniapp'

  });

具体参数查看官方文档 : https://uniapp.dcloud.io/api/router?id=navigateto

 

2、uni.redirectTo(OBJECT)

此路由跳转方法与navigateto用法一致,但是它的特点是在跳转后会关闭当前的页面,应用场景一般为做页面的重定向操作。

常用参数包括:

1)url  ->  需要跳转的应用内非 tabBar 的页面的路径,路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 'path?key=value&key2=value2';

2)  success -> 接口调用成功的回调函数;

3)  fail -> 接口调用失败的回调函数

示例:

  uni.redirectTo({

    url: 'test?id=1'

  });

具体参数查看官方文档 :https://uniapp.dcloud.io/api/router?id=redirectto

 

3.uni.reLaunch(OBJECT)

此路由跳转方法可以看作是redirectto的扩展升级,它的特点除了关闭跳转前页面外,还会关闭所有打开的页面,仅保留路由跳转对象页面,并且可以跳转到tabbar页面。

常用参数包括:

1)url  ->  需要跳转的应用内页面路径 , 路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 'path?key=value&key2=value2',如果跳转的页面路径是 tabBar 页面则不能带参数

2)  success -> 接口调用成功的回调函数;

3)  fail -> 接口调用失败的回调函数

示例:

   uni.reLaunch({

      url: 'test?id=1'

   });

具体参数查看官方文档 :https://uniapp.dcloud.io/api/router?id=relaunch

 

4.uni.switchTab(OBJECT)

此路由跳转方法特点:跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。

常用参数包括:

1)url  ->  需要跳转的 tabBar 页面的路径(需在 pages.json 的 tabBar 字段定义的页面),路径后不能带参数

2)  success -> 接口调用成功的回调函数;

3)  fail -> 接口调用失败的回调函数

示例:

    uni.switchTab({

      url: '/pages/index/index'

    });

具体参数查看官方文档 :https://uniapp.dcloud.io/api/router?id=switchtab

 

5.uni.navigateBack(OBJECT)

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

常用参数包括:

1)delta  -> 返回的页面数,如果 delta 大于现有页面数,则返回到首页。

示例:

    uni.navigateTo({

      url: 'C?id=1'

    });  

    uni.navigateBack({

      delta: 2

    });

具体参数查看官方文档 :https://uniapp.dcloud.io/api/router?id=navigateback

 

6.uni.preloadPage(OBJECT)

页面体验优化方式,预加载页面,是一种性能优化技术。被预载的页面,在打开时速度更快。

常用参数包括:

1)url  ->  预加载页面url

2)  complete-> 预加载成功完成回调;

3)  fail-> 预加载失败回调

示例:

  uni.preloadPage({

    url: "/pages/test/test"

  });

具体参数查看官方文档 :https://uniapp.dcloud.io/api/preload-page?id=preloadpage

 

总结:路由使用存在一定的平台差异性,具体可以查阅官方文档查看使用过程中的注意事项,只有熟读开发手册之后,才能在开发过程中如鱼得水,如虎添翼、有如神助的实现稳固开发。

官方文档:https://uniapp.dcloud.io/api/README

上一篇:uni-app技术分享| 用uni-app实现拖动的诀窍


下一篇:uniapp和原生微信小程序的异同