当前位置: 首页 > news >正文

【路由組件】

完成Vue Router 安装后,就可以使用路由了,路由的基本使用步骤,首先定义路由组件,以便使用Vue Router控制路由组件展示与 切换,接着定义路由链接和路由视图,以便告知路由组件渲染到哪个位置,然后再项目中创建路由模块,最后导入并挂载路由模块。
接下来通过实际操作方式演示Vue Router使用方法。
1.定义路由组件

在src \components 目录下创建2个组件,分别为Home
组件和About组件,用于演示组件切换效果,文件名为Home.vue和About.vue

Home.vue文件代码如下:

<template><div class="home-container"><h3>Home组件</h3></div>
</template>
<style scoped>.home-container{min-height:150px;background-color:#f2f2f2;padding:15px;}
<yle>

About.vue文件代码如下:

<template><div class="home-container"><h3>Home组件</h3></div>
</template>	
<style scoped>.about-container{min-height:150px;background-color:#f2f2f2;padding:15px;}
<yle>

定义路由链接和路由视图

为了在页面中将路由对应的组件显示出来,还要在App组件中定义路由视图。路由视图标签定义,该标签会被渲染成当前路由对应组件,另外,为了方便在不同组件之间切换,可以通过标签定义路由链接,该标签的to属性表示链接地址,与路由匹配规则中的path属性对应。

在src\App.vue文件中定义路由视图以及Home组件和About组件路由链接,具体代码如下。

<template><div class="home-container"><h1>App根组件</h1><router-link to="/home">首页</router-link><router-link to="/about">关于</router-link><hr><router-view></router-view></div>
</template>	<style scoped>.app-container{text-align:center;font-size:16px;}.app-container a {padding:10px;color:#000;
}.app-container a.routerr-link-active{color:#fff;background-color:#000;
}
<yle>

上述代码:第4行通过to属性定义Home组件链接地址为“/Home”,与路由匹配规则中path属性值“home”对应,第7行代码使用标签渲染当前路由对应组件,19-22行代码用于激活路由链接设置高亮样式。

相关文章:

【路由組件】

完成Vue Router 安装后&#xff0c;就可以使用路由了&#xff0c;路由的基本使用步骤&#xff0c;首先定义路由组件&#xff0c;以便使用Vue Router控制路由组件展示与 切换&#xff0c;接着定义路由链接和路由视图&#xff0c;以便告知路由组件渲染到哪个位置&#xff0c;然后…...

【C++风云录】数字逻辑设计优化:电子设计自动化与集成电路

集成电路设计&#xff1a;打开知识的大门 前言 本文将详细介绍关于数字芯片设计&#xff0c;电子设计格式解析&#xff0c;集成电路设计工具&#xff0c;硬件描述语言分析&#xff0c;电路验证以及电路优化六个主题的深入研究与实践。每一部分都包含了主题的概述&#xff0c;…...

Flask Response 对象

文章目录 创建 Response 对象设置响应内容设置响应状态码设置响应头完整的示例拓展设置响应的 cookie重定向响应发送文件作为响应 总结 Flask 是一个 Python Web 框架&#xff0c;用于快速开发 Web 应用程序。在 Flask 中&#xff0c;我们使用 Response 对象来构建 HTTP 响应。…...

算法001:移动零

力扣&#xff08;LeetCode&#xff09;. - 备战技术面试&#xff1f;力扣提供海量技术面试资源&#xff0c;帮助你高效提升编程技能,轻松拿下世界 IT 名企 Dream Offer。https://leetcode.cn/problems/move-zeroes/ 使用 双指针 来解题&#xff1a; 此处的双指针&#xff0c;…...

基于springboot+vue+Mysql的网上书城管理系统

开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;…...

python实现绘制烟花代码

在Python中&#xff0c;我们可以使用多个库来绘制烟花效果&#xff0c;例如turtle库用于简单的绘图&#xff0c;或者更复杂的库如pygame或matplotlib结合动画。但是&#xff0c;由于turtle库是Python自带的&#xff0c;我们可以使用它来绘制一个简单的烟花效果。 下面是一个使…...

Python小白的机器学习入门指南

Python小白的机器学习入门指南 大家好&#xff01;今天我们来聊一聊如何使用Python进行机器学习。本文将为大家介绍一些基本的Python命令&#xff0c;并结合一个简单的数据集进行实例讲解&#xff0c;希望能帮助你快速入门机器学习。 数据集介绍 我们将使用一个简单的鸢尾花数…...

学校上课,是耽误我学习了。。

>>上一篇&#xff08;文科生在三本院校&#xff0c;读计算机专业&#xff09; 2015年9月&#xff0c;我入学了。 我期待的大学生活是多姿多彩的&#xff0c;我会参加各种社团&#xff0c;参与各种有意思的活动。 但我是个社恐&#xff0c;有过尝试&#xff0c;但还是难…...

OpenFeign高级用法:缓存、QueryMap、MatrixVariable、CollectionFormat优雅地远程调用

码到三十五 &#xff1a; 个人主页 微服务架构中&#xff0c;服务之间的通信变得尤为关键。OpenFeign&#xff0c;一个声明式的Web服务客户端&#xff0c;使得REST API的调用变得更加简单和优雅。OpenFeign集成了Ribbon和Hystrix&#xff0c;具有负载均衡和容错的能力&#xff…...

python基础之函数

目录 1.函数相关术语 2.函数类型分类 3.栈 4.位置参数和关键字参数 5.默认参数 6.局部变量和全局变量 7.返回多个值 8.怀孕函数 9.匿名函数 10.可传递任意个数实参的函数 11.函数地址与函数接口 12.内置函数修改与函数包装 1.函数相关术语 函数的基本概念有函数头…...

深入理解C#中的IO操作 - FileStream流详解与示例

文章目录 一、FileStream类的介绍二、文件读取和写入2.1 文件读取&#xff08;FileStream.Read&#xff09;2.2 文件写入&#xff08;FileStream.Write&#xff09; 三、文件复制、移动和目录操作3.1 文件复制&#xff08;FileStream.Copy&#xff09;3.2 文件移动&#xff08;…...

信息泄露--注意点点

目录 明确目标: 信息泄露: 版本软件 敏感文件 配置错误 url基于文件: url基于路由: 状态码: http头信息泄露 报错信息泄露 页面信息泄露 robots.txt敏感信息泄露 .get文件泄露 --判断: 搜索引擎收录泄露 BP: 爆破: 明确目标: 失能 读取 写入 执行 信息泄…...

位运算符

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 位运算符是把数字看作二进制数来进行计算的&#xff0c;因此&#xff0c;需要先将要执行运算的数据转换为二进制&#xff0c;然后才能进行执行运算。…...

云上聚智——移动云云服务器进行后端的搭建及部署

什么是移动云 移动云是指将移动设备和云计算技术相结合&#xff0c;为移动应用提供强大的计算和存储能力的服务模式。传统的移动应用通常在本地设备上进行计算和存储&#xff0c;而移动云将这些任务转移到云端进行处理。通过移动云&#xff0c;移动设备可以利用云端的高性能计算…...

C语言程序的编译

目录 一、预处理&#xff08;预编译&#xff09; 二、编译 三、汇编 四&#xff0c;链接 在前面讲到了宏的定义&#xff0c;那么宏在编译时候是如何发生替换的&#xff1f;接下来做一下详细的介绍C语言程序的编译过程主要包括以下几个步骤&#xff1a;预处理、编译、汇编和…...

滴滴三面 | Go后端研发

狠狠的被鞭打了快两个小时… 注意我写的题解不一定是对的&#xff0c;如果你认为有其他答案欢迎评论区留言 bg&#xff1a;23届 211本 社招 1. 自我介绍 2. 讲一个项目的点&#xff0c;因为用到了中间件平台的数据同步&#xff0c;于是开始鞭打数据同步。。 3. 如果同步的时候…...

深度学习之基于Yolov3的行人重识别

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景 行人重识别&#xff08;Person Re-Identification&#xff0c;简称ReID&#xff09;是计算机视觉领域…...

防火墙最新技术汇总

防火墙技术持续发展&#xff0c;以应对日益复杂的网络安全威胁。以下是防火墙领域的一些最新技术汇总&#xff1a; 下一代防火墙&#xff08;NGFW&#xff09;&#xff1a;NGFW结合了传统防火墙的分组过滤和状态检测功能&#xff0c;还集成了深度包检测&#xff08;DPI&#xf…...

PikaUnsafe upfileupload

1.client check 客户端检测&#xff0c;前端js检测&#xff0c;禁用js和修改后缀名即可。 php格式不能上传&#xff0c;我们修改后缀上传。 蚁剑成功连接。 2.MIME type 这个就是 content-type 规定上传类型&#xff0c;上面的方法也能成功&#xff0c;也可以修改 conten-ty…...

git拉取项目前需要操作哪些?

1.输入 $ ssh-keygen -t rsa -C "秘钥说明" 按enter键 2.出现 ssh/id_rsa&#xff1a;(输入也可以不输入也可以) 然后按enter键 3.出现empty for no passphrase&#xff1a;(输入也可以不输入也可以) 然后按enter键 4.出现same passphrase again: (输入也可以不输入也…...

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

多云管理“拦路虎”:深入解析网络互联、身份同步与成本可视化的技术复杂度​

一、引言&#xff1a;多云环境的技术复杂性本质​​ 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时&#xff0c;​​基础设施的技术债呈现指数级积累​​。网络连接、身份认证、成本管理这三大核心挑战相互嵌套&#xff1a;跨云网络构建数据…...

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型

CVPR 2025 | MIMO&#xff1a;支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题&#xff1a;MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者&#xff1a;Yanyuan Chen, Dexuan Xu, Yu Hu…...

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时&#xff0c;你可能需要保留重要的数据&#xff0c;例如通讯录。好在&#xff0c;将通讯录从 iPhone 转移到 Android 手机非常简单&#xff0c;你可以从本文中学习 6 种可靠的方法&#xff0c;确保随时保持连接&#xff0c;不错过任何信息。 第 1…...

DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

python爬虫:Newspaper3k 的详细使用(好用的新闻网站文章抓取和解析的Python库)

更多内容请见: 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

相机Camera日志分析之三十一:高通Camx HAL十种流程基础分析关键字汇总(后续持续更新中)

【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:有对最普通的场景进行各个日志注释讲解,但相机场景太多,日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志,通过下列分类关键字搜索,即可清晰的分析不同场景的相机运行流程差异…...