uni-app (路由)

2023-11-09

介绍:

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

流程:

1.路由路由
uni-app有两种页面路由重定向方式:使用导航器组件扩展,调用API重定向。

2.页面栈
框架以栈的形式管理当前所有页面,当发生路由切换的时候,页面栈的表现如下:

路由方式 页面栈表现 触发时机
初始化 新页面入栈 uni-app:的第一个页面
:新页面 新页面入栈 调用API uni.navigateTo ,使用组件 <navigator open-type =“ navigate” />
页面重启 当前页面出栈,新页面入栈 调用API uni.redirectTo ,使用组件 <navigator open-type =“ redirectTo” />
页面返回 页面不断出栈,直到目标返回页 调用API uni.navigateBack ,使用组件 <navigator open-type =“ navigateBack” /> ,用户按左上角返回按钮,安卓用户点击物理后退键
标签切换 页面全部出栈,只留下新的标签页面 调用API uni.switchTab ,使用组件 <navigator open-type =“ switchTab” /> ,用户切换Tab
重加载 页面全部出栈,只留下新的页面 调用API uni.reLaunch ,使用组件 <navigator open-type =“ reLaunch” />

3.运行环境判断
4.开发环境和生产环境

uni-app可通过process.env.NODE_ENV判断当前环境是开发环境还是生产环境。一般用于连接测试服务器或生产服务器的动态切换。

5.在HBuilderX中,点击“运行”编译出来的代码是开发环境,点击“发行”编译出来的代码是生产环境
cli模式下,是通行的编译环境处理方式。

if(process.env.NODE_ENV === 'development'){
    console.log('开发环境')
}else{
    console.log('生产环境')
}

6.如果你需要自定义更多环境,某种测试环境:

假设只需要对单一平台配置,可以的package.json中配置,在HBuilderX的运行和发行菜单里会多一个出来。https://uniapp.dcloud.io/collocation/package
如果是针对所有平台配置,可以在VUE-config.js中配置。https://uniapp.dcloud.io/collocation/vue-config
快捷代码块
HBuilderX中敲入代码块uEnvDev,uEnvProd可以快速生成对应development,production的运行环境判定代码。

// uEnvDev
if (process.env.NODE_ENV === 'development') {
    // TODO
}
// uEnvProd
if (process.env.NODE_ENV === 'production') {
    // TODO
}

注意:判断平台
平台判断有2种场景,一种是在编译期判断,一种是在运行期判断。

.编译期判断编译期判断,即条件编译,不同平台在编译出包后已经是不同的代码。详见:条件编译

// #ifdef H5
    alert("只有h5平台才有alert方法")
// #endif

8.如上代码只会编译到H5的发行包里,其他平台的包不会包含如上代码。
运行期诊断运行期判断是指代码已经打入包中,仍然需要在运行期判断平台,此时可使用uni.getSystemInfoSync().platform判断客户端环境是Android,iOS还是小程序开发工具(在百度小程序开发工具,微信小程序开发工具,支付宝小程序开发工具中使用uni.getSystemInfoSync().platform返回值重置devtools)。

switch(uni.getSystemInfoSync().platform){
    case 'android':
       console.log('运行Android上')
       break;
    case 'ios':
       console.log('运行iOS上')
       break;
    default:
       console.log('运行在开发者工具上')
       break;
}

9.如有必要,也可以在条件编译里自己定义的一个变量,赋值。在后续运行代码中动态判断环境。

总结:

总而言之,路由就是单页面开发的时候,负责不同页面跳转而设立的,可以通过不同的路由路径来跳转到不同的路由
uni-app页面路由为框架统一管理,开发者需要在pages.json里配置每个路由页面的路径和页面样式。类似的小程序在app.json中配置页面路由相同。所以uni-app的路由用法与Vue Router不同,如仍希望采用Vue Router方式管理路由,可在插件市场搜索Vue-Router。

总结注意点:

  • 判断平台 平台判断有2种场景,一种是在编译期判断,一种是在运行期判断。

好了,我们的uni-app路由就到这里了

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

uni-app (路由) 的相关文章

  • VS2017找不到QT头文件

    一 我的电脑右键属性 高级系统设置 环境变量 增加环境变量Qt INCLUDEPATH 值为QT的头文件目录 二 重启VS 发现波纹线不见了 证明设置环境变量后VS能识别到QT头文件了 原理是 vs导入qt项目附加包含目录继承值有Qt IN
  • (202301)pytorch图像分类全流程实战Task6:可解释性分析、显著性分析

    Task6 可解释性分析 显著性分析 对B站up同济子豪兄的图像分类系列的学习 大佬的完整代码在GitHub开源 2022年人工智能依旧飞速发展 从传统机器学习模型到如今以 炼丹 为主的深度神经网络 代表着模型拟合度与模型可解释性各自的发展
  • MySQL学习(十六):数据类型之日期与时间类型

    数据类型之日期与时间类型 日期与时间是重要的信息 在我们的系统中 几乎所有的数据表都用得到 原因是客户需要知道数据的时间标签 从而进行数据查询 统计和处理 类型 名称 字节 日期格式 最小值 最大值 YEAR 年 1 YYYY或YY 190

随机推荐

  • Linux系统管理(六)高级存储管理

    目录 一 逻辑卷 二 lvm逻辑管理器 lvm建立 lvm拉伸 lvm缩减 lvm删除 lvm快照 三 vdo虚拟数据优化器 vdo建立 使用vdo设备 测试vdo性能 设置vdo开机自启动 vdo设备的删除 一 逻辑卷 pv 物理卷 被处
  • DRM——学习篇0:概念认识

    刚开始学习 记忆不是很好 容易忘 边学边记 阅读的速度会比较慢 看的会比较仔细 这边主要参考以下博客 前辈们水平很高 写的很详细 详细的知识学习可查看以下链接 详细请看 蜗窝科技 http www wowotech net graphic
  • wpf 怎么用代码连接sql server

    在WPF中 可以使用C 代码来连接SQL Server 以下是连接SQL Server的一般步骤 首先 在项目中添加对System Data SqlClient命名空间的引用 在代码中创建SqlConnection对象 该对象表示与SQL
  • 18.tf坐标系广播与监听的实现

    学习视频 https www bilibili com video BV1zt411G7Vn p 18 广播器代码 获取海龟位置 广播world与海龟坐标系之间的tf数据 监听器代码 监听tf数据 并计算 发布turtle2的速度指令 一
  • FAPI专题-2:5G nFAPI接口 - 中文规范-2- 消息交互流程

    作者主页 文火冰糖的硅基工坊 文火冰糖 王文兵 的博客 文火冰糖的硅基工坊 CSDN博客 本文网址 https mp csdn net mp blog creation editor 117588884 目录 第1章 简介 第2章 nFAP
  • MySQL开启远程访问权限

    默认情况下 MySQL只允许本地登录 即只能在安装MySQL环境所在的主机下访问 但是在日常开发和使用中 我们经常需要访问远端服务器的数据库 此时就需要开启服务器端MySQL的远程连接权限 1 生成环境 连接MySQL 2 查看MySQL当
  • 最言简意赅的strftime和strptime区分方式

    最近时常处理金融数据 最绕不过的就是对各种日期格式进行处理 其中用得最多的就是striptime和striftime 之前每用一次都得查一下用法 这次干脆完全弄清楚然后记下来 以下是最言简意赅的区分方式 strptime 将字符串转换为日期
  • 某团面试题:JVM 堆内存溢出后,其他线程是否可继续工作?

    转载 最近网上出现一个美团面试题 一个线程OOM后 其他线程还能运行吗 我看网上出现了很多不靠谱的答案 这道题其实很有难度 涉及的知识点有jvm内存分配 作用域 gc等 不是简单的是与否的问题 由于题目中给出的OOM java中OOM又分很
  • 谭铁牛院士:向生物学习 开启模式识别新突破

    人们在观察事物或现象的时候 常常要把各个相似的但又不完全相同的事物或现象组成一类 例如一个数字有不同的写法 对一个人来说 某一种写法虽然没有见过 但大脑却能自动将这个字识别出来 这种模式识别行为虽然人们早已司空见惯 在中国科学院院士谭铁牛看
  • 前端学习历程

    前言 还记得刚接触前端应该是两年前了吧 我就顺着回忆 慢慢写下我对前端的学习路程以及一些资源 初入坑 html css基础 这个是学习前端最基础的部分了 一开始看的是W3cschool 先看其中的html和css基础部分 一些常用标签 以及
  • Python常用的第三方库汇总【推荐】

    Python常用的第三方库汇总 pymysql 操作MySQL数据库 Flask 一个 Python 后端开发的微型框架 numpy 进行科学计算所需的基础包 pillow 非常好用的图像处理库 opencv python 图像处理库 Ma
  • google扫码库barcode-scanning的使用

    一 加入barcode scanning库 捆绑模式扫码 implementation com google mlkit barcode scanning 17 1 0 二 编写扫码分析类 用于分析扫码数据并回调方法返回结果 package
  • DuiLib使用教程之二---测试工程

    DuiLib测试工程 以下内容为原创 欢迎转载 转载请注明 来自试着不呼吸的博客 http blog csdn net haiqiang softwo article details 21485283 通过上节 http blog csdn
  • 短视频APP是如何开启你的美好生活的?

    欢迎大家前往腾讯云 社区 获取更多腾讯海量技术实践干货哦 本文由腾讯视频云终端团队发表于云 社区专栏 常青 2008 年毕业加入腾讯 一直从事客户端研发相关工作 先后参与过 PC QQ 手机QQ QQ物联 等产品项目 目前在腾讯视频云团队负
  • 多态和虚函数的基本概念和用法

    C 多态 多态按字面的意思就是多种形态 当类之间存在层次结构 并且类之间是通过继承关联时 就会用到多态 C 多态意味着调用成员函数时 会根据调用函数的对象的类型来执行不同的函数 多态的优点 代码组织结构清晰 可读性强 利于前期和后期的扩展以
  • steam++加速问题:出现显示443端口被 vmware-hostd(9860)占用的错误。

    前言 时不可以苟遇 道不可以虚行 今天的的前言诗句特地百度搜索了一下 诗句大概的意思是 时机是不可能随便就能遇到的 道路也要一步一步踏实地行走 象征着好运的诗句 之所以特地去找这样意思的诗句 主要的原因是 今天就是四六级考试 想给自己带来一
  • 利用Python(netCDF4库)读取.nc文件(NetCDF气象数据文件)的基本操作

    NetCDF network Common Data Form 网络通用数据格式是一种面向数组型并适于网络共享的数据的描述和编码标准 目前 NetCDF广泛应用于大气科学 水文 海洋学 环境模拟 地球物理等诸多领域 用户可以借助多种方式方便
  • LeetCode--初级算法--字符串类算法

    反转字符串 题目 编写一个函数 其作用是将输入的字符串反转过来 示例 1 输入 hello 输出 olleh 示例 2 输入 A man a plan a canal Panama 输出 amanaP lanac a nalp a nam
  • flask配置https协议

    感谢https blog csdn net qq 33934427 article details 127456673 文中多有参考再实践 一 要用https协议需要有ca证书 在windows10先下载windows版本openssl 地
  • uni-app (路由)

    介绍 uni app页面路由为框架统一管理 开发者需要在pages json里配置每个路由页面的路径和页面样式 类似的小程序在app json中配置页面路由相同 所以uni app的路由用法与Vue Router不同 如仍希望采用Vue R