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

Vue3路由

news 2025/10/15 11:48:36

文章目录

  • Vue3路由
    • 1. 载入vue-router 库
    • 2. 实例
      • 2.1 Vue.js + vue-router 实现单页应用
      • 2.2 router-link创建链接
      • 2.3 router-view显示与url对应组件
      • 2.4 `<router-link>` 相关属性

Vue3路由

1. 载入vue-router 库

Vue.js 路由需要载入vue-router 库

  • 安装直接下载地址：https://unpkg.com/vue-router@4

  • NPM使用使用淘宝镜像：

    npm install -g cnpm --registry=https://registry.npmmirror.com
cnpm install vue-router@4

    在这里插入图片描述
    在这里插入图片描述

2. 实例

2.1 Vue.js + vue-router 实现单页应用

  • <router-link> 是一个组件，该组件用于设置一个导航链接，切换不同 HTML 内容。 to 属性为目标地址， 即要显示的内容。

    以下实例中我们将 vue-router 加进来，然后配置组件和路由映射，再告诉 vue-router 在哪里渲染它们。代码如下所示：

    <script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script><div id="app"><h1>Hello App!</h1><p><!--使用 router-link 组件进行导航 --><!--通过传递 `to` 来指定链接 --><!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签--><router-link to="/">Go to Home</router-link><router-link to="/about">Go to About</router-link></p><!-- 路由出口 --><!-- 路由匹配到的组件将渲染在这里 --><router-view></router-view>
</div>

2.2 router-link创建链接

上面实例没有使用常规的 a 标签，而是使用一个自定义组件 router-link 来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。我们将在后面看到如何从这些功能中获益。

2.3 router-view显示与url对应组件

router-view 将显示与 url 对应的组件。你可以把它放在任何地方，以适应你的布局。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例 router-link 来创建链接 router-view 将显示与 url 对应的组件</title><script src="https://unpkg.com/vue@3"></script><script src="https://unpkg.com/vue-router@4"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo"><h1>Hello App</h1>
<!--   使用router-link组件进行导航 to传递制定链接-->
<!--    页面效果：<router-link></router-link>将呈现一个带有正确herf属性的<a>标签--><p>
<!--        使用Home路由组件--><router-link to="/">Go to Home</router-link>
<!--        使用About路由组件--><router-link to="/about">Go to About</router-link></p><!--    路由入口 路由匹配到的组件将渲染在这里--><router-view></router-view>
</div><script>
//    1. 定义路由组件 也可以从其他文件导入const Home = { template: '<div>Home</div>'}const About = { template: '<div>About</div>'}//  2.定义一些路由并映射到路由组件 每个路由都需要映射到一个组件const routes = [{ path: '/', component: Home},{ path: '/about', component: About},]//  3.创建路由实例并传递routes配置 可以在此输入更多的配置 单一般不输入 保持简单const router = VueRouter.createRouter({//     4. 内部提供了history模式实现 为了简单起见，我们在这里使用 hash 模式history: VueRouter.createWebHistory(),// routes:routes的缩写为routesroutes,})//  5. 创建并挂载根实例const app = Vue.createApp({})//  确保_use_ 路由实例使整个应用支持路由app.use(router)
//  将app应用挂载到名为app的divapp.mount('#app')</script>
</body>
</html>

页面效果：
在这里插入图片描述
点击Go to Home在这里插入图片描述
点击Go to About
在这里插入图片描述
在这里插入图片描述

  • 以上导航渲染结果：点击过的导航链接都会加上样式 class ="router-link-exact-active router-link-active"。

    <a href="/" class="router-link-active router-link-exact-active" aria-current="page">Go to Home</a>
<a href="/about" class="">Go to About</a>

在这里插入图片描述

2.4 <router-link> 相关属性

  • to表示目标路由的链接

    当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。

    <!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home">Home</a><!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'home'">Home</router-link><!-- 不写 v-bind 也可以，就像绑定别的属性一样 -->
<router-link :to="'home'">Home</router-link><!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link><!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link><!-- 带查询参数，下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

  • replace

    设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，导航后不会留下 history 记录。

    <router-link :to="{ path: '/abc'}" replace></router-link>

  • append

    设置 append 属性后，则在当前 (相对) 路径前添加其路径。例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b

    <router-link :to="{ path: 'relative/path'}" append></router-link>

  • tag

    有时候想要 <router-link> 渲染成某种标签，例如 <li>。 于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航。

    <router-link to="/foo" tag="li">foo</router-link>
<!-- 渲染结果 -->
<li>foo</li>

  • active-class

    设置 链接激活时使用的 CSS 类名。可以通过以下代码来替代。注意这里 class 使用 active-class="_active"。

    <style>._active{background-color : red;}
</style>
<p><router-link v-bind:to = "{ path: '/route1'}" active-class = "_active">Router Link 1</router-link><router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

  • exact-active-class

    配置当链接被精确匹配的时候应该激活的 class。可以通过以下代码来替代。

    <p><router-link v-bind:to = "{ path: '/route1'}" exact-active-class = "_active">Router Link 1</router-link><router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

  • event

    声明可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组。

    如：设置了 event 为 mouseover ，及在鼠标移动到 Router Link 1 上时导航的 HTML 内容会发生改变。

    <router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link>

相关文章：

Vue3路由

文章目录 Vue3路由1. 载入vue-router 库2. 实例2.1 Vue.js vue-router 实现单页应用2.2 router-link创建链接2.3 router-view显示与url对应组件2.4 <router-link> 相关属性 Vue3路由 1. 载入vue-router 库 Vue.js 路由需要载入vue-router 库 安装直接下载地址&#xf…...

编程日记 2023/9/14 20:59:41

Android Studio的笔记--aidl实现和调用

android AIDL接口使用 aidl实现新建aidl实现工程build.gradleproguard-rules.pro增加aidl文件 增加aidl实现aidl实现服务打开aidl服务 aidl使用新建aidl使用工程增加aidl文件使用aidl方法 相关回显 aidl实现 新建aidl实现工程 新建一个工程。工程名testaidl。包名com.lxh.tes…...

编程日记 2023/9/14 20:56:38

大模型从入门到应用——LangChain：代理（Agents）-[工具包（Toolkit）]

分类目录&#xff1a;《大模型从入门到应用》总目录 工具包是工具的集合&#xff0c;这些工具被设计成一起用于特定的任务&#xff0c;并且具有方便的加载方法。常见的工具包如下&#xff1a; CSV代理JiraJSON代理OpenAPI代理自然语言APIPandas数据框架代理PlayWright浏览器工…...

编程日记 2023/9/14 20:51:33

VR全景算不算好的创业项目？有哪些特性？

现在是全民创业的时代&#xff0c;大家都在找创业项目&#xff0c;那么什么是好的创业项目呢&#xff1f;有人会问VR全景算不算创业好项目呢&#xff1f;一般情况下好的创业项目&#xff0c;发展前景和市场消费群体都是比较大的&#xff0c;市场需求大才能满足多数消费者的需求…...

编程日记 2023/9/14 20:48:27

Spring系列文章：Spring集成Log4j2⽇志框架、整合JUnit

一、集成Log4j2⽇志框架 从Spring5之后&#xff0c;Spring框架⽀持集成的⽇志框架是Log4j2.如何启⽤⽇志框架&#xff1a; 第⼀步&#xff1a;引⼊Log4j2的依赖 <!--log4j2的依赖--> <dependency><groupId>org.apache.logging.log4j</groupId><a…...

编程日记 2023/9/14 20:46:25

flink的网络缓冲区

背景 在flink的taskmanager进行数据交互的过程中&#xff0c;网络缓冲区是一个可以提升网络交换速度的设计&#xff0c;此外&#xff0c;flink还通过网络缓冲区实现其基于信用值credit的流量控制&#xff0c;以便尽可能的处理数据倾斜问题 网络缓冲区 在flink中每个taskmana…...

编程日记 2023/9/14 20:44:23

产品经理学习笔记

产品文档之BRD、MRD和PRD - 知乎BRD、MRD和PRD一起被认为是从市场到产品需要形成的标准规范文档&#xff1a; 1、BRD&#xff08;Business Requirement Document&#xff09;&#xff0c;商业需求文档&#xff0c;是一份产品商业论证报告&#xff0c;基于商业目标或价值所描述的…...

编程日记 2023/9/14 20:43:22

【深入理解Linux锁机制】七、互斥体

系列文章： 我的圈子：高级工程师聚集地 【深入理解Linux锁机制】一、内核锁的由来 【深入理解Linux锁机制】二、中断屏蔽 【深入理解Linux锁机制】三、原子操作 【深入理解Linux锁机制】四、自旋锁 【深入理解Linux锁机制】五、衍生自旋锁 【深入理解Linux锁机制】六、信…...

编程日记 2023/9/14 20:39:17

UGUI画布加载优化

在Unity中&#xff0c;UGUI画布的加载优化可以通过以下几种方式来实现&#xff1a; 1. 合理使用画布渲染模式&#xff1a;UGUI画布有三种渲染模式&#xff0c;分别是Screen Space - Overlay、Screen Space - Camera和World Space。在使用时&#xff0c;应根据场景需求选择最适…...

编程日记 2023/9/14 20:38:16

SEC的下一步目标是什么？过时的证券法与加密货币行业，哪个会被先淘汰？

加密货币已经“不合规”了&#xff0c;尤其是其“商业模式”&#xff0c;至少美国证券交易委员会(SEC)主席Gary Gensler这样认为。由于这种观点在美国监管机构中普遍存在&#xff0c;因此涉及加密的执法行动达到历史最高水平也不足为奇。 在短短几年内&#xff0c;我们目睹了所…...

编程日记 2023/9/14 20:36:14

Kafka3.0.0版本——消费者（独立消费者消费某一个主题数据案例__订阅主题）

目录 一、独立消费者消费某一个主题数据案例1.1、案例需求1.2、案例代码1.3、测试 一、独立消费者消费某一个主题数据案例 1.1、案例需求 创建一个独立消费者&#xff0c;消费firstTopic主题中数据&#xff0c;所下图所示&#xff1a; 注意&#xff1a;在消费者 API 代码中必…...

编程日记 2023/9/14 20:35:13

笔记本多拓展出一个屏幕

一、首先要知道&#xff0c;自己的电脑有没有Type-c接口&#xff0c;支持不支持VGA 推荐&#xff1a; 自己不清楚&#xff0c;问客服&#xff0c;勤问。 二、显示屏与笔记本相连&#xff0c;通过VGA 三、连接好了&#xff0c;需要去配置 网址&#xff1a;凑合着看&#xff…...

编程日记 2023/9/14 20:34:12

Redis 高可用及持久化

Redis 高可用 在web服务器中&#xff0c;高可用是指服务器可以正常访问的时间&#xff0c;衡量的标准是在多长时间内可以提供正常服务&#xff08;99.9%、99.99%、99.999%等等&#xff09;。但是在Redis语境中&#xff0c;高可用的含义似乎要宽泛一些&#xff0c;除了保证提供…...

编程日记 2023/9/14 20:32:10

Java高级: 反射

目录 反射反射概述反射获取类的字节码反射获取类的构造器反射获取构造器的作用反射获取成员变量&使用反射获取成员方法反射获取成员方法的作用 反射的应用案例 接下来我们学习的反射、动态代理、注解等知识点&#xff0c;在以后开发中极少用到&#xff0c;这些技术都是以后…...

编程日记 2023/9/14 20:30:08

【计算机网络】什么是WebSocket？

目录 WebSocket简介协议优点使用场景 WebSocket WebSocket是一种网络传输协议,可在单个TCP连接上进行全双工通信&#xff0c;位于OSI模型的应用层。 WebSocket使得客户端和服务器之间的数据交换变得更加简单&#xff0c;允许服务器主动向客户端推送数据。在WebSocket API中&a…...

编程日记 2023/9/14 20:29:07

Apinto 网关： Go语言实现 HTTP 转 gRPC

gRPC 是由 Google 开发的一个高性能、通用的开源RPC框架&#xff0c;主要面向移动应用开发且基于 HTTP/2 协议标准而设计&#xff0c;同时支持大多数流行的编程语言。 gRPC 基于 HTTP/2 协议传输&#xff0c; HTTP/2 相比 HTTP1.x有以下优势: 采用二进制格式传输协议&#xff…...

编程日记 2023/9/14 20:28:05

【管理运筹学】第 7 章 | 图与网络分析（4，最大流问题）

系列文章目录 【管理运筹学】第 7 章 | 图与网络分析&#xff08;1&#xff0c;图论背景以及基本概念、术语、矩阵表示&#xff09; 【管理运筹学】第 7 章 | 图与网络分析&#xff08;2&#xff0c;最小支撑树问题&#xff09; 【管理运筹学】第 7 章 | 图与网络分析&#xf…...

编程日记 2023/9/14 20:26:03

linux学习总结

shell 1.在文本环境下&#xff0c;shell作为命令解释器&#xff0c;建立了用户和操作系统之间的接口。当用户键入一个命令时&#xff0c;shell将对该命令进行解释&#xff0c;并调用相应的程序。2.Linux下有多个shell&#xff0c;最常用的3个shell: bash tcsh zsh3.shell …...

编程日记 2023/9/14 20:25:02

【API 管理】什么是 API 管理，为什么它很重要？

当今复杂的数字生态系统由许多相互关联的部分组成。API 作为看门人和连接器在其中发挥着关键作用——提供了许多最终用户甚至没有注意到的自动化机会和效率。 企业密切关注 API。它们对于应用程序、数据和各种客户交互的功能至关重要。 这使得 API 管理成为几乎每个部门的组织…...

编程日记 2023/9/14 20:23:00

基于人体呼出气体的电子鼻系统的设计与实现

基于人体呼出气体的电子鼻系统的设计与实现 摘要 电子鼻技术是通过模式识别技术对传感器采集的人体呼出气体进行分类训练的方法。本文研究实现的电子鼻系统包括下面几个部分:首先搭建以Arduino为控制核心的气路采集装置&#xff0c;包括MOS传感器和双阀储气袋构建的传感器阵列和…...

编程日记 2023/9/14 20:18:56

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表&#xff1f;1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

编程新知 2025/8/28 9:42:18

云计算——弹性云计算器（ECS）

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

编程新知 2025/8/16 21:50:27

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

编程新知 2025/10/14 11:33:35

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

编程新知 2025/9/10 5:36:56

3.3.1_1 检错编码（奇偶校验码）

从这节课开始&#xff0c;我们会探讨数据链路层的差错控制功能&#xff0c;差错控制功能的主要目标是要发现并且解决一个帧内部的位错误&#xff0c;我们需要使用特殊的编码技术去发现帧内部的位错误&#xff0c;当我们发现位错误之后&#xff0c;通常来说有两种解决方案。第一…...

编程新知 2025/10/9 21:46:13

第一篇：Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

编程新知 2025/10/15 10:32:29

css的定位（position）详解：相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

编程新知 2025/8/9 2:28:15

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测；从基础到高级，涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

编程新知 2025/9/12 15:10:44

【JavaSE】绘图与事件入门学习笔记

-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角&#xff0c;以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向&#xff0c;距离坐标原点x个像素;第二个是y坐标&#xff0c;表示当前位置为垂直方向&#xff0c;距离坐标原点y个像素。 坐标体系-像素 …...

编程新知 2025/9/12 0:24:07

嵌入式学习笔记DAY33（网络编程——TCP）

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

编程新知 2025/9/28 3:35:09