【移动端】商场项目路由设计

1:路由设计配置:

一级路由配置

分析项目,设计路由,配置一级路由

一级路由:单个页面独立展示的,都是一级路由,例如:登录页面,首页架子,报错页面

二级路由:就是包含在一个组件里面的子组件,例如:首页架子里面有首页,我的,购物车等

分析:main.js加载App.vue组件页面渲染到index.html里面,App.vue组件页面就行构建模板样式,通俗来讲就是App.vue里面有什么内容页面上面就会展示什么内容,但是将所有的内容写到App.vue组件页面中显然太麻烦,然后就出现了路由出口,意思就是我在路由里面配置的页面组件在App.vue组件页面配置了一个路由出口路由切换到到哪个组件页面就把哪个组件里面的内容在App.vue组件页面中展示出来。这一种就是一级路由的展示方式,像登录页面

在实际场景中通常都是有一级路由和二级路由组合进行展示的,例如淘宝的首页架子中里面包含首页组件页面,购物车组件页面,我的组件页面,这种的实现通常搭建自定义一个组件首页架子为一级路由假设是Layout.vue是首页架子,在配置路由时,将使用children将(首页组件页面,购物车组件页面,我的组件页面)配置成二级路由,在Layout.vue中添加一个路由出口意思就是配置的二级路由的组件页面将在Layout这个一级组件中展示出来,一级路由Layout这个组件将在App.vue这个组件出口中展示出来。最终完成一级,二级路由的展示

二级路由的配置:

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

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

相关文章

ADuM1201可使用π121U31间接替换π122U31直接替换

ADuM1201可使用π121U31间接替换π122U31直接替换 一般低速隔离通信150Kbps电路可使用π121U31,价格优势较大。速度快的有其它型号可达10M,200M,600M。 本文主要介绍ADUM1201,替换芯片π121U31简单资料请访问下行链接 只要0.74元的双通道数字隔离器,1T1…

【VSCode】快捷方式log去掉分号

文章目录 一、引入二、解决办法 一、引入 我们使用 log 快速生成的 console.log() 都是带分号的 但是我们的编程习惯都是不带分号,每次自动生成后还需要手动删掉分号,太麻烦了! 那有没有办法能够生成的时候就不带分号呢?自然是有…

ubuntu 18.04 ros1学习

总结了一下,学习内容主要有: 1.ubuntu的基础命令 pwd: 获得当前路径 cd: 进入或者退出一个目录 ls:列举该文件夹下的所有文件名称 mv 移动一个文件到另一个目录中 cp 拷贝一个文件到另一个目录中 rm -r 删除文件 gedit sudo 给予管理员权限 sudo apt-…

开源硬件初识——Orange Pi AIpro(8T)

开源硬件初识——Orange Pi AIpro(8T) 大抵是因为缘,妙不可言地就有了这么一块儿新一代AI开发板,乐于接触新鲜玩意儿的小火苗噌一下就燃了起来。 还没等拿到硬件,就已经开始在Orange Pi AIpro 官网上查阅起资料&…

基于安卓的虫害识别软件设计--(1)模型训练与可视化

引言 简介:使用pytorch框架,从模型训练、模型部署完整地实现了一个基础的图像识别项目计算资源:使用的是Kaggle(每周免费30h的GPU) 1.创建名为“utils_1”的模块 模块中包含:训练和验证的加载器函数、训练…

如何使用Spring Cache优化后端接口?

Spring Cache是Spring框架提供的一种缓存抽象,它可以很方便地集成到应用程序中,用于提高接口的性能和响应速度。使用Spring Cache可以避免重复执行耗时的方法,并且还可以提供一个统一的缓存管理机制,简化缓存的配置和管理。 本文将详细介绍如何使用Spring Cache来优化接口,…

【前端】Mac安装node14教程

在macOS上安装Node.js版本14.x的步骤如下: 打开终端。 使用Node Version Manager (nvm)安装Node.js。如果你还没有安装nvm,可以使用以下命令安装: curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash 然后关…

基于NANO 9K 开发板加载PICORV32软核,并建立交叉编译环境

目录 0. 环境准备 1. 安装交叉编译器 2. 理解makefile工作机理 3. 熟悉示例程序的代码结构,理解软核代码的底层驱动原理 4. 熟悉烧录环节的工作机理, 建立下载环境 5. 编写例子blink, printf等, 加载运行 6. 后续任务 0.…

卷积网络迁移学习:实现思想与TensorFlow实践

摘要:迁移学习是一种利用已有知识来改善新任务学习性能的方法。 在深度学习中,迁移学习通过迁移卷积网络(CNN)的预训练权重,实现了在新领域或任务上的高效学习。 下面我将详细介绍迁移学习的概念、实现思想&#xff0c…

【成品设计】基于STM32单片机的饮水售卖机

基于STM32单片机的饮水售卖机 所需器件: STM32最小系统板。RFID:MFRC-522用于IC卡检测。OLED屏幕:用于显示当前水容量、系统状态等。水泵软管:用于抽水。水位传感器(3个):用于分别标定&#x…

低代码赋能企业数字化转型:数百家软件公司的成功实践

本文转载于葡萄城公众号,原文链接:https://mp.weixin.qq.com/s/gN8Rq9TDmkMpCtNMMsBUXQ 导读 在当今的软件开发时代,以新技术助力企业数字化转型已经成为一个热门话题。如何快速适应技术变革,构建符合时代需求的技术能力和业务模…

【STM32F103】HC-SR04超声波测距

【STM32F103】HC-SR04超声波测距 一、HC-SR041、工作原理2、其他参数及时序图 二、代码编写思路三、HAL配置四、代码实现五、实验结果 前言 本次实验主要实现用stm32f103HC-SR04实现超声波测距,将测距数值通过串口上传到上位机串口助手 一、HC-SR04 1、工作原理 (…

【Unity知识点详解】Addressables的资源加载

今天来简单介绍一下Addressables&#xff0c;并介绍一下如何通过AssetName加载单个资源、如何通过Label加载多个资源、以及如何通过List<string>加载多个资源。由于Addressables的资源加载均为异步加载&#xff0c;所以今天给大家介绍如何使用StartCoroutine、如何使用As…

计算机算法中的数字表示法——浮点数

目录 1.前言2.浮点数的形式3.举例说明4.浮点数四则运算 微信公众号含更多FPGA相关源码&#xff1a; 1.前言 前面讲了定点表示法&#xff0c;定点表示法有一个主要的限制&#xff0c;那就是它不能有效地表示非常大或非常小的数&#xff0c;因为小数点的位置是固定的。为了解决这…

ios:文本框默认的copy、past改成中文复制粘贴

问题 ios 开发&#xff0c;对于输入框的一些默认文案展示&#xff0c;如复制粘贴是英文的&#xff0c;那么如何改为中文的呢 解决 按照路径找到这个文件 ios/项目/Info.plist&#xff0c;增加 <key>CFBundleAllowMixedLocalizations</key> <true/> <…

Echarts报警告Legend data should be same with series name or data name.

问题排查&#xff1a; 1. 确保 legend中的data中名字和series中每一项的name要匹配。 2. 仔细查看报警规律发现次数有在变化&#xff0c;因此找到代码中是动态修改legend,series的位置&#xff0c;检查一下这两个list的赋值逻辑。 果然&#xff0c;检查发现问题出现在了遍历里…

数据分析案例-在线食品订单数据可视化分析与建模分类

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…

2.5Bump Mapping 凹凸映射

一、Bump Mapping 介绍 我们想要在屏幕上绘制物体的细节&#xff0c;从尺度上讲&#xff0c;一个物体的细节分为&#xff1a;宏观、中观、微观宏观尺度中其特征会覆盖多个像素&#xff0c;中观尺度只覆盖几个像素&#xff0c;微观尺度的特征就会小于一个像素宏观尺度是由顶点或…

在鲲鹏服务器搭建k8s高可用集群分享

高可用架构 本文采用kubeadm方式搭建k8s高可用集群&#xff0c;k8s高可用集群主要是对apiserver、etcd、controller-manager、scheduler做的高可用&#xff1b;高可用形式只要是为&#xff1a; 1. apiserver利用haproxykeepalived做的负载&#xff0c;多apiserver节点同时工作…

【主动均衡和被动均衡】

文章目录 1.被动均衡2.主动均衡1.被动均衡 被动均衡一般通过电阻放电的方式,对电压较高的电池进行放电,以热量形式释放电量,为其他电池争取更多充电时间。这样整个系统的电量受制于容量最少的电池。充电过程中,锂电池一般有一个充电上限保护电压值,当某一串电池达到此电压…