Vue3路由配置

路由其实就是一组对应关系,将一个路径与一个组件对应起来,当路径发生变化,路由器就可以通过路由规则,找到当前路径对应的组件,并将该组件呈现到页面上

使用路由步骤:

1.终端输入 npm i vue-router

2.在App.vue中编写导航栏、展示区,并且在components文件夹下面编写可能需要的组件

3.创建路由器,在src文件夹中新建router文件夹,新建index.ts文件

4.在main.ts中引入路由器,原本是创建了应用之后直接挂载(createApp(App).mount('#app')),现在是创建应用之后使用路由器再挂载

这时候就配置好了路由环境,但是当手动改变路径,比如后面加上‘/home’,页面不会出现变化,虽然路由器监测到了地址发生了变化,也找到了一组路由规则,知道了此时的地址对应的组件是Home.vue,但是当他想要把这个对应的组件呈现到页面上时会出现问题,因为它不知道要呈现到哪个位置

5.告诉路由器要把组件放到什么位置

这时候就可以通过手动在路径后面加‘/home’、‘/news’等让展示区呈现不同组件了,但是我们需要点击按钮实现展示区组件的变化,手动改变地址太不方便了

6.通过RouterLink实现点击切换展示效果

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

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

相关文章

UDP网络聊天室

前言 基于UDP的网络聊天室 一、项目需求 如果有用户登录,其他用户可以收到这个人的登录信息如果有人发送信息,其他用户可以收到这个人的群聊信息如果有人下线,其他用户可以收到这个人的下线信息服务器可以发送系统信息 二、步骤 1.创建UD…

Softing工业将亮相2024年阿赫玛展会——提供过程自动化的连接解决方案

您可于2024年6月10日至14日前往美因河畔法兰克福11.0号馆,Softing将在C25展位展出,欢迎莅临! 作为工业应用中数据交换领域公认的专家,Softing工业致力于帮助各行各业的客户部署网络自动化和优化生产流程。 使用Softing产品&…

mybatis plus 配置多数据源(数据源进行切换)

多数据源(数据源进行切换) AbstractRoutingDataSource 根据用户定义的规则选择当前的数据源,这样我们可以在执行查询之前,设置使用的数据源。实现可动态路由的数据源,在每次数据库查询操作前执行。它的抽象方法 determineCurrentLookupKey()…

如何在OpenHarmony上使用SeetaFace2人脸识别库?

简介 相信大部分同学们都已了解或接触过OpenAtom OpenHarmony(以下简称“OpenHarmony”)了,但你一定没在OpenHarmony上实现过人脸识别功能,跟着本文带你快速在OpenHarmony标准设备上基于SeetaFace2和OpenCV实现人脸识别。 项目效…

【Vue】Vue2路由

目录 路由作用Vue Router路由Vue Router路由的组成VueRouter常用的函数Vue Router的使用安装Vue Router创建router引入router使用 备注 Vue多级路由(嵌套路由)编写组件配置嵌套路由 Vue中的动态路由代码示例父组件Home.vue子组件路由配置 路由的 query 参…

黑龙江等保测评深入理解

“没有网络安全,就没有国家安全”,等级保护测评是指按照网络安全系统制定的一系列的防护过程,对已经有的和即将上线的商业服务的基础设施(系统,数据库,中间件等)所做的一系列的检查,…

HeyGen AI是什么?怎样使用HeyGen AI?

在数字时代,视频内容为王。无论是在社交媒体还是网站上,视频都以其独特的方式吸引着人们的眼球。然而,制作出专业水准的视频往往需要大量的时间和技术知识。HeyGen AI正是为了解决这一难题而诞生的。 HeyGen AI简介 HeyGen AI是一个创新的视…

618值得买的好物清单,这些数码好物你千万不能错过!

​随着618购物节的距离越来越近,你是不是已经开始疯狂浏览购物app,准备大肆采购一番了?但是在购物之前,还是得先做一做功课,避免陷入购物陷阱,而作为一名经验丰富的数码爱好者,想通过这次机会给…

Thinkphp内核开发盲盒商城源码v2.0 对接易支付/阿里云短信/七牛云存储

源码简介 这套系统是我从以前客户手里拿到的,100完整可用,今天测试防红链接失效了,需要修改防红API即可!前端页面展示我就不放了,懂的都懂 优点是Thinkphp开发的,二开容易。 源码图片 资源获取:Thinkphp内核开发盲盒商城源码v2.0 对接易支付/阿里云短…

kafka监控配置和告警配置——筑梦之路

kafka_exporter项目地址:https://github.com/danielqsj/kafka_exporter docker-compose部署kafka_exporter # docker-compose部署多个kafka_exporter,每个exporter对接一个kafka# cat docker-compose.ymlversion: 3.1 services:kafka-exporter-opslogs…

KubeEdge学习

KubeEdge学习主要包括对KubeEdge的理解、安装、配置、部署应用以及了解其在实践中的应用案例等方面。以下是关于KubeEdge学习的详细步骤和要点: 理解KubeEdge: KubeEdge是一个开源的系统,它基于Kubernetes构建,旨在将本机容器化应…

vue3+Ts 关于生成环境与开发环境请求路径问题

这里我是创建了axios 实例,通过axios 实例去请求后端, // 创建axios实例 export const service:AxiosInstance axios.create({//请求地址baseURL: (window as any).Config.BACKEND_URL, //import.meta.env.VITE_APP_BASE_API, // 超时timeout: 10000 *…

3DMax文件打开跳出请求操作需要提升

解决方法如下 打开autoremove,点击扩展功能,点击管理员已经阻止运行此应用 提示修复成功后,重启电脑再尝试打开max文件。

保研笔试复习——nju

文章目录 一、单选计算机网络计算机组成原理数字逻辑电路数据结构操作系统微机系统 多选题计算机网络计算机系统结构操作系统 免责声明:题目源自于网络,侵删。 就在今天2024-5-18,考的题下面的只有一道AVL的原题,其他都不是原题&a…

平板如何实现无纸化会议

为了实现高效的无纸化会议,连通宝可以是在内部网络部署,那么,平板如何实现无纸化会议? 1. 服务器配置: 部署专用无纸化会议系统服务器(如rhub无纸化会议服务器)至组织的内部网络中。确保该服务…

Ipad air6买什么电容笔?5款超值精品平替电容笔推荐!

电容笔作为ipad的最佳拍档,为学生党和打工人带来了极大的便利,二者搭配效率真的大大提升,但是,如何选购一支适合自己的电容笔呢?作为一个对数码设备非常感兴趣并且有一定了解的人,我根据自己多年的使用经验…

SQLite数据库免改造透明加密解决方案:给数据加把锁

在数字化时代,信息安全和隐私保护显得尤为重要。TDE透明加密技术,是一种在用户无感知的情况下对数据进行加密和解密的技术。它能够在数据生成、存储、传输和使用过程中自动进行加密处理,无需用户手动操作。透明加密技术的核心在于其透明性&am…

webgl three 模型、几何体、材质关系 及克隆、拷贝

使用相同几何体、材质的模型相互等价 console.log(material1);console.log(mesh.material)console.log(mesh1.material) 当一个改变时另外两个也都改变 几何体也一样 重复模型、几何体、材质可以多次使用 更改坐标放在不同位置 网格模型Mesh、几何体、材质复制使用克隆.clon…