【uni-app】路由

news/发布时间2024/9/19 17:46:36

(1)路由配置

uni-app 页面路由全部交给框架统一管理,开发者需要在pages.json里配置每个路由页面的路径及页面样式(类似小程序在 app.json 中配置页面路由)。


"pages": [{"path": "pages/index","style": {"navigationBarTitleText": "路由配置","navigationBarBackgroundColor": "#FFFFFF","navigationBarTextStyle": "black","backgroundColor": "#FFFFFF","enablePullDownRefresh": true}},{"path": "pages/user","style": {"navigationBarTitleText": "路由配置","navigationBarBackgroundColor": "#FFFFFF","navigationBarTextStyle": "black","backgroundColor": "#FFFFFF","enablePullDownRefresh": true}}
]

可以在这里配置底部导航栏:

"tabBar": {"color": "#7A7E83","selectedColor": "#3cc51f","borderStyle": "white","backgroundColor": "#ffffff","list": [{"pagePath": "pages/index/index","iconPath": "static/resource/images/tab_index.png","selectedIconPath": "static/resource/images/tab_index_seled.png","text": "首页"},{"pagePath": "pages/order/index","iconPath": "static/resource/images/tab_pub.png","selectedIconPath": "static/resource/images/tab_pub_seled.png","text": "订单"}, {"pagePath": "pages/user/index","iconPath": "static/resource/images/tab_user.png","selectedIconPath": "static/resource/images/tab_user_seled.png","text": "我的"}]},

当然还可以配置全局样式等等。

(2)路由跳转

uni-app 有两种页面路由跳转方式:使用navigator组件跳转(标签式导航)、调用API跳转(编程式导航)

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

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

(3)获取当前页面栈

getCurrentPages() 函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。

注意: getCurrentPages() 仅用于展示页面栈的情况,请勿修改页面栈,以免造成页面状态错误。

(4)路由传参与接收

说明:页面生命周期的 onLoad()监听页面加载,其参数为上个页面传递的数据,如:


//页面跳转并传递参数
uni.navigateTo({url: 'page2?name=liy&message=Hello'
});

url为将要跳转的页面路径 ,路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔。如 ‘path?key1=value2&key2=value2’,path为下一个页面的路径,下一个页面的onLoad函数可得到传递的参数。


// 页面 2 接收参数
onLoad: function (option) { //option为object类型,会序列化上个页面传递的参数console.log(option.name); //打印出上个页面传递的参数。console.log(option.message); //打印出上个页面传递的参数。
}

注意:url 有长度限制,太长的字符串会传递失败,并且不规范的字符格式也可能导致传递失败,所以对于复杂参数建议使用 encodeURI、decodeURI 进行处理后传递

(5)小程序路由分包配置

因小程序有体积和资源加载限制,各家小程序平台提供了分包方式,优化小程序的下载和启动速度。

所谓的主包,即放置默认启动页面及 TabBar 页面,而分包则是根据 pages.json 的配置进行划分。

在小程序启动时,默认会下载主包并启动主包内页面,当用户进入分包内某个页面时,会把对应分包自动下载下来,下载完成后再进行展示,此时终端界面会有等待提示。


"subPackages": [{"root": "news","pages": [{"path": "index","style": {"navigationBarTitleText": "新闻中心","navigationBarBackgroundColor": "#FFFFFF","navigationBarTextStyle": "black","backgroundColor": "#FFFFFF"}}]}... 
],
// 预下载分包设置
"preloadRule": {"pages/index": {"network": "all","packages": ["activities"]}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.bcls.cn/aaKd/9059.shtml

如若内容造成侵权/违法违规/事实不符,请联系编程老四网进行投诉反馈email:xxxxxxxx@qq.com,一经查实,立即删除!

相关文章

从Spring Boot应用上下文获取Bean定义及理解其来源

前言 在Spring框架中&#xff0c;Bean是组成应用程序的核心单元。特别是在Spring Boot项目中&#xff0c;通过使用SpringApplication.run()方法启动应用后&#xff0c;我们可以获得一个ConfigurableApplicationContext实例&#xff0c;这个实例代表了整个应用程序的运行时环境…

解锁安全之门,Windows Server 2019密码修改攻略大揭秘

1、使用管理员账户登录到 Windows Server 2019 2、打开“控制面板” 3、找到“用户账户”窗口 4、在“用户账户”窗口中&#xff0c;选择“更改你的账户类型” 5、选择要更的账户 6、在更对应的更改账户中&#xff0c;选择“更改密码” 7、在“更改密码”窗口中&#xff0c;输…

矩阵的导数运算(理解分子布局、分母布局)

矩阵的导数运算(理解分子布局、分母布局) 1、分子布局和分母布局 请思考这样一个问题&#xff0c;一个维度为m的向量y对一个标量x的求导&#xff0c;那么结果也是一个m维的向量&#xff0c;那么这个结果向量是行向量&#xff0c;还是列向量呢&#xff1f; 答案是&#xff1a…

在SAP HANA中使用OData(二)

通常有两种方式通过OData来暴露SAP HANA中的数据库对象&#xff0c;一是直接使用Database Object&#xff0c;比如前一篇和本篇文章介绍的例子&#xff0c;这种方式针对于数据已经存在于SAP HANA中&#xff0c;在Repository中没有对应的设计时对象(Design-time Object)&#xf…

aspose转pdf乱码问题

1 问题描述 在centos服务器使用aspose.word转换word文件为pdf的时候显示中文乱码&#xff0c;但是在win服务器上使用可以正常转换。 2 问题原因 通过查资料分析后确认是由于linux服务器缺少对应的字库导致文件转换出现乱码的。 3 解决方案1:环境解决 安装字库&#xff0c;将…

【Redis】安装与部署-Ubuntu

在Ubuntu上部署redis 安装环境&#xff1a;ubuntu 20.04 1.安装Redis&#xff1a; 在终端中运行以下命令来安装Redis&#xff1a; linuxubuntu:/mnt/hgfs/GB28181$ sudo apt install redis-server2.配置Redis&#xff1a; Redis的默认配置文件位于/etc/redis/redis.conf 一…

MATLAB环境下脑电信号EEG的谱分析

脑电信号一直伴随着人类的生命&#xff0c;脑电波是脑神经细胞发生新陈代谢、离子交换时细胞群兴奋突触电位总和&#xff0c;脑电信号的节律性则和丘脑相关&#xff0c;含有丰富的大脑活动信息。通常我们所接触的脑电图都是头皮脑电图&#xff0c;在有些特殊场合还需要皮下部位…

从C到C++

二、从C到C 本章介绍一些C拓展的非面向对象功能。 引用&#xff08;掌握&#xff09; 1.1 概念 引用从一定程度上讲是一个指针的平替&#xff0c;几乎被所有面向对象编程语言所使用。引用相当于对某一个目标变量起”别名“。 操作引用与操作原变量完全一样。 #include <iost…

2018-02-14 新闻内容爬虫【上学时做论文自己爬新闻数据,原谅我自己懒发的图片】

2018-02-14新闻内容爬虫【上学时做论文自己爬新闻数据&#xff0c;原谅我自己懒发的图片】资源-CSDN文库https://download.csdn.net/download/liuzhuchen/88878591爬虫过的站点&#xff1a; 1QQ新闻 1&#xff0c;准备爬取滚动新闻页面 2 通过F12 开发工具查找发现&#xff…

【学习笔记】人群归因分数 PAF 以及combined PAF

人群归因风险比例&#xff08;Population Attributable Fraction&#xff0c;PAF&#xff09;是一个流行病学指标&#xff0c;它估计了在总体中&#xff0c;如果能消除一个特定的危险因素&#xff0c;能预防多少百分比的疾病或健康结果。简单来说&#xff0c;PAF回答的是&#…

【物联网应用案例】智能农业应用案例

随着物联网 (IoT) 的广泛应用&#xff0c;各种互联设备已经深度融入我们的生活&#xff0c;涵盖了健康与健身、家庭自动化、物流运输以及智慧城市和工业物联网等多个领域。因此&#xff0c;将物联网、联网设备和自动化技术应用于农业&#xff0c;是十分符合时代发展需求的&…

C++的STL常用算法->常用遍历算法、常用查找算法、常用排序算法、常用拷贝和替换算法、常用算术生成算法、常用集合算法

#include<iostream> using namespace std; #include <algorithm> #include <vector> //常用遍历算法 for_each //普通函数 void print01(int val) { cout << val << " "; } //仿函数 //函数对象 class print02 { public: v…

【Linux】TCP应用与相关API守护进程

需要云服务器等云产品来学习Linux的同学可以移步/–>腾讯云<–/官网&#xff0c;轻量型云服务器低至112元/年&#xff0c;优惠多多。&#xff08;联系我有折扣哦&#xff09; 文章目录 1. 相关使用接口2. 代码实现2.1 日志组件2.2 Server端2.3 Client端2.3 bug解决 3. 守…

数据结构之数组

一、定义 数组&#xff08;Array&#xff09;是一种用连续的内存空间存储相同数据类型数据的线性数据结构。 二、内存结构 1.创建数组 我们创建一个数组 int[] array {22,33,88,66,55,25} &#xff0c;在内存结构如下图所示&#xff1a; 首先创建了array数组&#xff0c;会…

Stable Diffusion WebUI 图库浏览器插件:浏览器以前生成的图片

本文收录于《AI绘画从入门到精通》专栏&#xff0c;专栏总目录&#xff1a;点这里。 大家好&#xff0c;我是水滴~~ 本文介绍的插件叫图库浏览器&#xff0c;是一个用于浏览器以前生成的图片信息的插件。本文将介绍该插件的安装和使用&#xff0c;希望能够对你有所帮助。 文章…

基于Java SSM springboot+VUE+redis实现的前后端分类版网上商城项目

基于Java SSM springbootVUEredis实现的前后端分类版网上商城项目 博主介绍&#xff1a;多年java开发经验&#xff0c;专注Java开发、定制、远程、文档编写指导等,csdn特邀作者、专注于Java技术领域 作者主页 央顺技术团队 Java毕设项目精品实战案例《500套》 欢迎点赞 收藏 ⭐…

远程访问Mysql数据库(最新有效)

在我们日常的开发中&#xff0c;我们的Mysql数据库一般都是不可以直接远程访问的&#xff0c;但有时候在特定的场景下&#xff0c;也想要远程访问&#xff0c;那要怎么配置呢&#xff1f; 其实要配置远程访问很简单&#xff0c;只需要做如下配置&#xff1a; 1.查看当前的用户…

新版极狐gitlab安装+配置详细版

这里安装的服务器环境是centos7.9系统&#xff0c;安装极狐版本16.9。 极狐地址&#xff1a;https://gitlab.cn/install/ 1. 安装和配置所需的依赖 在 CentOS 7 上&#xff0c;下面的命令会在系统防火墙中打开 HTTP、HTTPS 和 SSH 访问。这是一个可选步骤&#xff0c;如果您…

蓝桥杯 最多约数

242*2*2*3&#xff08;质因子&#xff09;&#xff0c;约数&#xff08;11&#xff09;*&#xff08;11&#xff09;*&#xff08;11&#xff09;*&#xff08;11&#xff09;8 #include <bits/stdc.h> using namespace std; int main(){int a[700]{393353, 901440, 1234…

IDEA类和方法注释模板设置

一、概述 IDEA自带的注释模板不是太好用&#xff0c;我本人到网上搜集了很多资料系统的整理了一下制作了一份比较完整的模板来分享给大家&#xff0c;我不是专业玩博客的&#xff0c;写这篇文章只是为了让大家省事。 这里设置的注释模板采用Eclipse的格式&#xff0c;下面先贴…
推荐文章