un-iapp路由学习,跨平台运行,支持Android和IOS系统

uni-app路由知识了解

路由大家都知道是什么,我这里解释一下。首先路由有个英文名字叫Router,大家可以自己用翻译工具自己翻译听听,就知道怎么读了,我这里贴一个官网的路由解释地址,大家可以看看官网怎么说的。

un-iapp路由学习,跨平台运行,支持Android和IOS系统


uni-app页面路由为框架统一管理,开发者需要在pages.json里配置每个路由页面的路径及页面样式。类似小程序在app.json中配置页面路由一样。所以 uni-app 的路由用法与 Vue Router 不同,如仍希望采用 Vue Router 方式管理路由,可在插件市场搜索 Vue-Router。

说白了路由就是页面跳转的意思,就是一个页面展现给用户看了,用户从一个页面跳转到另外一个页面就需要路由来显示,今天我就来演示一下多端运行的路由配置方案。

uni-APP路由跳转方式

uni-app 有两种页面路由跳转方式:使用navigator组件跳转、调用API跳转。

navigator跳转DEMO

这个是官网的一个简单例子,可以看出来这个跳转就是用到了navigator嵌套,只要是这个navigator 包裹在内的所有内容都可以点击跳转,这个也是最基本的页面跳转方式。



uni.navigateTo(OBJECT) 保留当前的页面跳转到应用内的某个页面。

使用uni.navigateBack 可以返回到原页面。

通过参数URL进行跳转 如果是跳转非tabBar页面的路径,路径后面是可以携带参数的,参数与路径之间使用?分隔参数建与参数值用=相连,不同参数用&分隔,,,,传递后的参数可以在目标页面的onload函数可得到传递的参数.

uni.redirectTo(OBJECT) 关闭当前页面,跳转到应用内的某个页面。(不可以使用uni.navigateBack返回,使用uni.redirectTo时当前页面已经被关闭,无法返回,但是可以返回到当前页面的上一个页面 )

uni.reLaunch(OBJECT) 关闭所有页面,打开到应用的某个页面  (他与uni.navigateTo 的区别就是,uni.reLaunch关闭所有页面进入新的页面 ,uni.navigateTo是保留当前页面并跳入最新页面 ,)

uni.switchTab(OBJECT) 跳转到tabBar页面,并关闭其他所有非tabBar页面 (设置url路径时,需要跳转的tabBar页面的路径必须是在pages.json的tabBar字段定义的页面,并且!!!路径的后面不可以携带参数)

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

  

总结:

 1.navigateTo,redirectTo 只能打开非tabBar页面

 2.switchTab 只能打开tabBar页面

 3.reLaunch 可以打开任意页面

最后如果喜欢我就点个赞,关注一下吧,只有你的关注和点赞才是我的动力。


展开阅读全文

页面更新:2024-04-12

标签:路由   嵌套   英文   一下吧   字段   说白了   开发者   包裹   路径   样式   函数   参数   页面   方式   数码   用户   系统   平台

1 2 3 4 5

上滑加载更多 ↓
推荐阅读:
友情链接:
更多:

本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828  

© CopyRight 2020-2024 All Rights Reserved. Powered By 71396.com 闽ICP备11008920号-4
闽公网安备35020302034903号

Top