[保姆级教程]uniapp实现页面路由配置

在这里插入图片描述

文章目录

    • 新建目录
    • 新建页面
    • 配置页面路由
    • 修改tabBar地址
    • 其他:在package.json中的pages配置详细


新建目录

先点击src–》新建–》目录
在这里插入图片描述
输入名称,并以此类推完成所有新建目录
在这里插入图片描述

新建页面

右击目录,点击新建–》vue文件
在这里插入图片描述
弹出弹框,输入页面名称,点击创建。并以此类推完成所有新建页面
在这里插入图片描述

配置页面路由

在package.json中的pages配置,继续添加即可
在这里插入图片描述

{"path": "pages/user/index","style": {"navigationBarTitleText": "食疗"}},

修改tabBar地址

把iconPath改成对应地址就好
在这里插入图片描述

其他:在package.json中的pages配置详细

以下是对您提供的内容的整理,以表格形式呈现:

属性类型默认值描述平台差异说明
navigationBarBackgroundColorHexColor#F8F8F8导航栏背景颜色(同状态栏背景色)APP与H5为#F8F8F8,小程序平台请参考相应小程序文档
navigationBarTextStyleStringblack导航栏标题颜色及状态栏前景颜色,仅支持 black/white
navigationBarTitleTextString导航栏标题文字内容
navigationBarShadowObject导航栏阴影,配置参考下方 导航栏阴影
navigationStyleStringdefault导航栏样式,仅支持 default/custom。custom即取消默认的原生导航栏,需看使用注意微信小程序 7.0+、百度小程序、H5、App(2.0.3+)
disableScrollBooleanfalse设置为 true 则页面整体不能上下滚动(bounce效果),只在页面配置中有效,在globalStyle中设置无效微信小程序(iOS)、百度小程序(iOS)
backgroundColorHexColor#ffffff窗口的背景色微信小程序、百度小程序、抖音小程序、飞书小程序、京东小程序
backgroundTextStyleStringdark下拉 loading 的样式,仅支持 dark/light
enablePullDownRefreshBooleanfalse是否开启下拉刷新,详见页面生命周期
onReachBottomDistanceNumber50页面上拉触底事件触发时距页面底部距离,单位只支持px,详见页面生命周期
backgroundColorTopHexColor#ffffff顶部窗口的背景色(bounce回弹区域)仅 iOS 平台
backgroundColorBottomHexColor#ffffff底部窗口的背景色(bounce回弹区域)仅 iOS 平台
disableSwipeBackBooleanfalse是否禁用滑动返回App-iOS(3.4.0+)
titleImageString导航栏图片地址(替换当前文字标题),支付宝小程序内必须使用https的图片链接地址支付宝小程序、H5、App
transparentTitleStringnone导航栏透明设置。支持 always 一直透明 / auto 滑动自适应 / none 不透明支付宝小程序、H5、APP
titlePenetrateStringNO导航栏点击穿透支付宝小程序、H5
app-plusObject设置编译到 App 平台的特定样式,配置项参考下方 app-plusApp
h5Object设置编译到 H5 平台的特定样式,配置项参考下方 H5H5
mp-alipayObject设置编译到 mp-alipay 平台的特定样式,配置项参考下方 MP-ALIPAY支付宝小程序
mp-weixinObject设置编译到 mp-weixin 平台的特定样式微信小程序
mp-baiduObject设置编译到 mp-baidu 平台的特定样式百度小程序
mp-toutiaoObject设置编译到 mp-toutiao 平台的特定样式抖音小程序
mp-larkObject设置编译到 mp-lark 平台的特定样式飞书小程序
mp-qqObject设置编译到 mp-qq 平台的特定样式QQ小程序
mp-kuaishouObject设置编译到 mp-kuaishou 平台的特定样式快手小程序
mp-jdObject设置编译到 mp-jd 平台的特定样式京东小程序
usingComponentsObject引用小程序组件,参考 小程序组件App、微信小程序、支付宝小程序、百度小程序、京东小程序
leftWindowBooleantrue当存在 leftWindow时,当前页面是否显示 leftWindowH5
topWindowBooleantrue当存在 topWindow 时,当前页面是否显示 topWindowH5
rightWindowBooleantrue当存在 rightWindow时,当前页面是否显示 rightWindowH5
maxWidthNumber单位px,当浏览器可见区域宽度大于maxWidth时,两侧留白,当小于等于maxWidth时,页面铺满;不同页面支持配置不同的maxWidth;maxWidth = leftWindow(可选)+page(页面主体)+rightWindow(可选)H5(2.9.9+)

您好,我是肥晨。
欢迎关注我获取前端学习资源,日常分享技术变革,生存法则;行业内幕,洞察先机。

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

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

相关文章

电路笔记 : 嘉立创EDA 导入、查找、设计管理器(快速寻找网络标签)功能+DRC错误检查和处理

导入功能 查找功能 可查找多种类型,如原件名称、网络标签等 设计管理器 图层查看 DRC错误 规则设置 线距问题 大多数PCB制造商能够可靠地生产5 mil间距的走线和间隙。这是一个常见的标准,适合大多数消费级和工业级电子产品。在5 mil以上的间距&#xff…

嵌入式中间件_3.嵌入式中间件的一般架构

根据嵌入式中间件的不同类型和其应用对象的不同,其架构也有所不同,通常嵌入式中间件没有统一的架构,这里仅仅列举两种中间件架构。 1.消息中间件 1.1消息中间件原理架构 消息中间件是消息传输过程中保存消息的一种容器。它将消息从它的源中…

科技的成就(六十)

559、汉明码 1950 年 4 月,著名的纠错码汉明码诞生。理查德汉明发布论文“Error Detecting and Error Correcting Codes”,提出汉明码。汉明码是一种线性纠错码,用于检测转移数据时发生的错误并予以修正,最多可以检测到 2 位错误或…

VirtualStudio配置QT开发环境

环境 VirtualStudio2022Qt5.12.10 安装msvc工具链(这一步不是必须的) 打开virtual studio,打开Virtual Studio Installer界面选择要安装的msvc版本,点击安装 安装VirtualStudio扩展 在线安装 打开virtual Studio,…

玄机平台流量特征分析-常见攻击事

前言 熟悉常见的攻击流量特征,我们就可以通过主机的一个流量情况来判断主机遭受了何种攻击。这里来看看玄机平台的一道题目。 步骤1.1 这里需要我们找出恶意扫描者,也就是黑客的ip。下载好附件之后用wiresharke打开,直接筛选http协议的流量…

手写精简版TinyHttpd项目(一)

前言: 我们在之前的TinyHttpd的精读(可以在首页去查看)中已经是基本的了解了显示一个网页的基本过程,那么我们学习后可以通过手写一个精简版的进行巩固下。 0.新工程的建立 我们也可以顺带复习下如何通过cmake在ubuntu下新建一个工程(记得提前下载cmake…

【前端面经】数组算法题解

目录 题目一:两数之和题目二:最长无重复字符子串题目三:合并两个有序数组题目四:寻找数组中的峰值 题目一:两数之和 描述:给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目…

MyBatis逆向工程和MyBatisX插件的使用

文章目录 1.ORM思维2.逆向工程3.MyBatisX插件的使用 1.ORM思维 ORM(Object-Relational Mapping,对象-关系映射)是一种将数据库和面向对象编程语言中的对象之间进行转换的技术。它将对象和关系数据库的概念进行映射,最后我们就可以…

MySQL数据库与基本操作(增删改查)

一、数据库的基本概念 数据库要学习的四个基本概念,主要是:数据、数据库系统、数据库、数据管理系统。数据(Date)是描述事物的记录,数据库系统(DBS),数据库管理系统(DBMS…

微信小程序,分享和反馈功能

<button type"primary" open-type"share">分享</button> <button type"primary" open-type"feedback">反馈</button>

使用ReentrantLock和ThreadPoolExecutor模拟抢课

这里主要是在场景下帮助理解ReentrantLock和线程池的使用。 import java.util.concurrent.locks.Lock; import java.util.concurrent.locks.ReentrantLock;public class GrabCourseTask implements Runnable {private final String studentName;private static int availableS…

如何优雅地限制textarea的输入字数?

大家好&#xff0c;我是瑶山&#xff0c;今天聊聊textarea textarea 有基础的同学都知道<textarea>是HTML中的一个标签&#xff0c;用于定义多行的文本输入控件。它允许用户在表单中输入多行文本&#xff0c;相较于单行输入框可以输入更多的内容。 但是&#xff0c;如果…

【牛客面试必刷TOP101】Day33.BM70 兑换零钱(一)和BM71 最长上升子序列(一)

文章目录 前言一、BM70 兑换零钱(一)题目描述题目解析二、BM71 最长上升子序列(一)题目描述题目解析总结 前言 一、BM70 兑换零钱(一) 题目描述 描述&#xff1a; 给定数组arr&#xff0c;arr中所有的值都为正整数且不重复。每个值代表一种面值的货币&#xff0c;每种面值的货币…

7.华为交换机端口配置链路聚合Eth-trunk

目的&#xff1a;两台华为交换机端口配置链路聚合 LSW1配置 [Huawei]interface Eth-Trunk 1 [Huawei-Eth-Trunk1]q [Huawei]int g0/0/1 [Huawei-GigabitEthernet0/0/1]eth-trunk 1 [Huawei-GigabitEthernet0/0/1]int g0/0/2 [Huawei-GigabitEthernet0/0/2]eth-trunk 1LSW2配置…

计算机网络:运输层 - 概述

计算机网络&#xff1a;运输层 - 概述 运输层的任务端口号复用与分用UDP协议首部格式 TCP协议面向字节流 运输层的任务 物理层、数据链路层以及网络层&#xff0c;他们共同解决了将主机通过网络互联起来所面临的问题&#xff0c;实现了主机到主机的通信。 网络层的作用范围是…

如何使用GPT?初学者的指南

ChatGPT是一个非常先进的AI工具&#xff0c;它使用GPT-4架构&#xff0c;能够生成自然的语言回应。它的多功能性和理解复杂指令的能力&#xff0c;使得很多人用它来回答各种问题&#xff0c;就像用Google一样输入关键词。不过&#xff0c;ChatGPT还能做更多事情&#xff0c;下面…

智能网联汽车安全问题

随着数字技术及智能网联汽车产业的迅猛发展&#xff0c;智能网联汽车作为未来交通系统的重要组成部分&#xff0c;其网络安全性和可靠性问题日益凸显&#xff0c;与人们的生命财产安全息息相关。因此&#xff0c;深度分析智能网联汽车面临的网络安全风险&#xff0c;全面开展数…

ArcGIS arcpy代码工具——关于工具使用的软件环境说明

系列文章目录 ArcGIS arcpy代码工具——批量对MXD文件的页面布局设置修改 ArcGIS arcpy代码工具——数据驱动工具批量导出MXD文档并同步导出图片 ArcGIS arcpy代码工具——将要素属性表字段及要素截图插入word模板 ArcGIS arcpy代码工具——定制属性表字段输出表格 ArcGIS arc…

Linux中的进程控制

Linux中的进程控制 &#xff08;1&#xff09;C程序示例&#xff0c;使用fork()创建一个子进程&#xff1a; #include <stdio.h> #include <stdlib.h> #include <unistd.h> #include <sys/wait.h> int main() { pid_t pid; int status; in…

【Redis】java客户端(SpringData和jedis)

https://www.oz6.cn/articles/58 https://www.bilibili.com/video/BV1cr4y1671t/?p16 redis官网客户端介绍&#xff1a;https://redis.io/docs/latest/develop/connect/clients/ jedis maven引入依赖 <dependencies><!--引入Jedis依赖--><dependency><…