文章目录

  • 1 路由和路由器
  • 2 基本切换效果
    • 2.1 App.vue(根组件)
    • 2.2 components(子组件)
      • 2.2.1 Home.vue(首页)
      • 2.2.2 News.vue(新闻)
      • 2.2.3 About.vue(关于)
    • 2.3 路由器
      • 2.3.1 router/index.ts
      • 2.3.2 main.ts
    • 2.4 效果展示
    • 2.5 程序流程
  • 3 笔记
    • 3.1 路由组件和一般组件
      • 3.1.1 Header.vue(一般组件)
      • 3.1.2 App.vue(根组件)
      • 3.1.3 router/index.ts(渲染路由组件)
    • 3.2 路由器的两种工作模式
      • 3.2.1 history模式(无#号)
      • 3.2.2 hash模式(有#号)
    • 3.3 to的两种写法
    • 3.4 命名路由
      • 3.4.1 router/index.ts
      • 3.4.2 App.vue

(1)导航区、展示区;(2)请来路由器;(3)制定路由的具体规则;(4)形成一个一个的xxx.vue。路由组件和一般组件的区别;路由器的两种工作模式:history模式和hash模式;命名路由的使用。

1 路由和路由器

在这里插入图片描述

在这里插入图片描述
应用步骤:
(1)导航区、展示区。
(2)请来路由器。
(3)制定路由的具体规则(什么路径,对应着什么组件)。
(4)形成一个一个的xxx.vue。
请添加图片描述

2 基本切换效果

2.1 App.vue(根组件)

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

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

相关文章

GaussDB实例级自动备份策略:构建数据安全的“自动防护网”

GaussDB实例级自动备份策略:构建数据安全的“自动防护网” 在数字化转型的浪潮中,数据库作为企业核心数据的载体,其安全性与可恢复性直接关系到业务的连续性。对于分布式数据库GaussDB而言,实例级自动备份策略是保障数据安全的关…

推荐几本关于网络安全的书

对于网络安全从业者、相关专业学生以及对网络安全感兴趣的人士而言,掌握扎实的网络安全知识和技能至关重要。以下推荐的几本网络安全书籍,涵盖了网络安全领域的多个重要方面,是学习和研究网络安全的优质参考资料。 1、攻击网络协议&#xff…

工业4.0浪潮下PROFIBUS DP转ETHERNET/IP在轧钢厂的创新实践

在工业自动化4.0推动制造业向智能化升级的背景下,轧钢厂生产对设备互联与数据协同提出更高要求。PROFIBUS DP与ETHERNET/IP协议的特性差异,制约着西门子PLC与工业测距仪等设备的高效协作。通过协议转换技术实现两者互通,为轧钢生产线注入智能…

从0开始学习R语言--Day31--概率图模型

在探究变量之间的相关性时,由于并不是每次分析数据时所用的样本集都能囊括所有的情况,所以单纯从样本集去下判断会有武断的嫌疑;同样的,我们有时候也想要在数据样本不够全面时就能对结果有个大概的了解。 例如医生在给患者做诊断…

微信小程序进度条progress支持渐变色

微信小程序自带进度条progress支持渐变色代码 .wx-progress-inner-bar {border-radius: 8rpx !important;background: linear-gradient(90deg, #FFD26E 8%, #ED0700 100%) !important; }<view class"progress-box"><progress percent"80" back…

Linux内核网络协议栈深度解析:面向连接的INET套接字实现

深入剖析Linux内核中TCP连接管理的核心机制,揭示高效网络通信的实现奥秘。 一、源地址匹配:连接建立的第一道关卡 在TCP连接建立过程中,内核需要验证源地址是否匹配。inet_rcv_saddr_equal()函数是实现这一功能的核心,它巧妙地处理了IPv4/IPv6双栈环境: bool inet_rcv_s…

Vue 项目中 Excel 导入导出功能笔记

功能概述 该代码实现了 Vue 项目中 Excel 文件的三大核心功能&#xff1a; Excel 导入&#xff1a;上传文件并解析数据&#xff0c;刷新表格展示。模板下载&#xff1a;获取并下载标准 Excel 模板文件。数据导出&#xff1a;将表格数据按多级表头结构导出为 Excel 文件。 一…

71. 简化路径 —day94

前言&#xff1a; 作者&#xff1a;神的孩子在歌唱 一个算法小菜鸡 大家好&#xff0c;我叫智 71. 简化路径 给你一个字符串 path &#xff0c;表示指向某一文件或目录的 Unix 风格 绝对路径 &#xff08;以 / 开头&#xff09;&#xff0c;请你将其转化为 更加简洁的规范路径…

Linux系统编程 | 互斥锁

1、什么是互斥锁 如果信号量的值最多为 1&#xff0c;那实际上相当于一个共享资源在任意时刻最多只能有一个线程在访问&#xff0c;这样的逻辑被称为“互斥”。这时&#xff0c;有一种更加方便和语义更加准确的工具来满足这种逻辑&#xff0c;他就是互斥锁。 “锁”是一种非常形…

数据文件写入技术详解:从CSV到Excel的ETL流程优化

文章大纲&#xff1a; 引言&#xff1a;数据文件写入在ETL流程中的重要性 在现代数据处理中&#xff0c;ETL&#xff08;提取、转换、加载&#xff09;流程是数据分析和业务决策的核心环节&#xff0c;而数据文件写入作为ETL的最后一步&#xff0c;扮演着至关重要的角色。它不…

在Cline中使用Gemini CLI,图形化界面操作:从命令行到可视化操作的全新体验,爽炸天!

在软件开发的进程中&#xff0c;命令行工具虽功能强大&#xff0c;但对部分开发者而言&#xff0c;图形化界面的直观与便捷性有着独特魅力。此前&#xff0c;Cline 新版本集成 Gemini CLI 的消息在开发者社群引发热议&#xff0c;尤其对于偏好图形界面的开发者来说&#xff0c;…

正交视图三维重建 笔记 2d线到3d线

这种代码怎么写好&#xff0c;x1tx1 x2tx2 x1x2在一条线上tx2和tx1在一条线上输出x1 y1 ty1&#xff0c;x2 y2 ty2 线过的点 的集合 俯视图找深度 测试一下 目标 四条线变一条线 复杂度贼大跑起来贼慢 加了16000条 去重 for (const [x1, y1, x2, y2, lineId, type] of front…

【耳机】IEM 前腔 后腔 泄压孔 -> 调音纸对频响曲线的影响

一、后腔 1.曲线说明 绿色&#xff1a;无调音纸 红色&#xff1a;使用Y3 粉色&#xff1a;使用Y6 2.结论 后腔是负责微调的&#xff0c;阻尼大小和低频升降成 反比。 阻 大 -> 低频 降低 阻 小 -> 低频 升高 二、前腔 1.曲线说明 红色&#xff1a;无调音纸 黄色&am…

信息安全与网络安全---引言

仅供参考 文章目录 一、计算机安全1.1 CIA三元组1.2 影响等级1.3 计算机安全的挑战 二、OSI安全体系结构2.1 安全攻击2.2 安全服务2.3 安全机制 三、基本安全设计准则四、攻击面和攻击树&#xff08;重点&#xff09;4.1 攻击面4.2 攻击树 五、习题与答案 一、计算机安全 &…

C# VB.NET取字符串中全角字符数量和半角字符数量

C# VB.NET中Tuple轻量级数据结构和固定长度数组-CSDN博客 https://blog.csdn.net/xiaoyao961/article/details/148872196 下面提供了三种统计字符串中全角和半角字符数量的方法&#xff0c;并进行了性能对比。 性能对比&#xff08;处理 100 万次 "Hello&#xff0c;世界…

CC++公司面试题[个人总结,持续更新中]

嵌入式初级面试题 姓名: 日期: 开始时间: (答题时间60分钟,答题过程中请不要上网查询资料,不可带走答卷) 1:设float a=2,b=4,c=3;,以下C语言表达式与代数式(a+b)+c计算结果不一致的是( )[3分] A.(a+b)c/2 B. (1/2)*(a+b)c C. (a+b)c*1/2 D.c/2(a+b) 2:为了向二进制文件尾部…

Qt QGraphics简述及例程 - QGraphicsView、QGraphicsScene和QGraphicsItem

Qt QGraphics简述及例程 引言一、简单例程二、关于坐标系问题 引言 QGraphics*是Qt框架中&#xff0c;主要用于处理2D图形项的显示、交互和管理的模块&#xff0c;包括QGraphicsView、QGraphicsScene和QGraphicsItem。提供了一套高效的场景-视图架构&#xff0c;适合开发复杂的…

代码随想录打卡第一天

文章讲解&#xff1a;代码随想录 视频讲解&#xff1a;手把手带你撕出正确的二分法 | 二分查找法 | 二分搜索法 | LeetCode&#xff1a;704. 二分查找_哔哩哔哩_bilibili class Solution { public:int search(vector<int>& nums, int target) {int left0;//左边界int…

时序数据库全面解析与对比

文章目录 1. 时序数据库概述1.1 时序数据特点1.2 时序数据库核心功能 2. 主流时序数据库对比2.1 InfluxDB2.2 Prometheus2.3 TimescaleDB2.4 OpenTSDB2.5 TDengine 3. 全方位对比3.1 功能对比3.2 性能对比3.3 适用场景对比3.4 社区与生态 4. 选型建议4.1 根据数据规模选择4.2 根…

【STM32CubeMX】ST官网MCU固件库下载及安装

用STM32CubeMX自带的Updater更新固件包会遇到各种幺蛾子&#xff08;如下图所示&#xff09;&#xff0c;所以干脆自己下载固件包&#xff0c;快速升级固件。 1. ST官网搜索你需要的MCU型号&#xff0c;并选择需要的固件版本&#xff0c;我这里是H7的MCU所以就找H7&#xff08;…