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

Vue3路由

news 文章来源：https://blog.csdn.net/weixin_46592197/article/details/132845303 2025/1/15 6:51:16

文章目录

  • 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

OPC发展历程

目录 1 opc 发展历程 1.1 OPC产生的背景 1.2 经典OPC 1.3 OPC UA 2 OPC DA简介 2.1 OPC Server/Client 2.2 OPC Server 2.3 OPC数据更新 2.4 读取数据方式 3 OPC XML简介 3.1 诞生由来 3.2 功能服务 1 opc 发展历程 OPC是英文“OLE for Process Control”的缩写&am…...

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

第69步 时间序列建模实战：ARIMA建模（R）

基于WIN10的64位系统演示 一、写在前面 这一期&#xff0c;我们使用R进行SARIMA模型的构建。 同样&#xff0c;这里使用这个数据&#xff1a; 《PLoS One》2015年一篇题目为《Comparison of Two Hybrid Models for Forecasting the Incidence of Hemorrhagic Fever with Re…...

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

【多线程】CountDownLatch

CountDownLatch 同时等待 N 个任务执行结束. 好像跑步比赛&#xff0c;10个选手进行比赛, 所有选手都通过终点&#xff0c;才能公布成绩。 代码示例: 构造 CountDownLatch 实例, 初始化 10 表示有 10 个任务需要完成.每个任务执行完毕, 都调用 latch.countDown() . 在 Count…...

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

使用 docker buildx 构建跨平台镜像 (QEMU/buildx/build)

目录 1. 使用 buildx 构建跨平台镜像1.1. 简介1.2. 安装1.3. 构建跨平台镜像1.4. 跨平台镜像构建策略1.4.1. 在内核中使用 QEMU 仿真支持1.4.2. 使用相同的构建器实例在多个本机节点上构建。1.4.3. 使用 Dockerfile 中的多阶段构建, 交叉编译到不同的平台架构中。 1.5. 创建 bu…...

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

算法|Day49 动态规划17

LeetCode 647- 回文子串 题目链接&#xff1a;力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 题目描述&#xff1a;给你一个字符串 s &#xff0c;请你统计并返回这个字符串中 回文子串 的数目。 回文字符串 是正着读和倒过来读一样的字符串。 子…...

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

Linux nohup命令

nohup命令 no hang up 在后台启动命令,终端关闭 程序依然可以执行 1.在后台启动命令 命令 nohup COMMAND2.使用nohup命令在后台启动COMMAND, 并将所有标准输出都重定向到fileA nohup COMMAND > /path/fileA 2>&1 &# COMMAND 需要运行的命令 # &g…...

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

SQL Server 跨库/服务器查询

这里写目录标题 1 SQL Server 跨库/服务器查询1.1 跨库查询1.2 跨服务器查询1.2.1 创建链接服务器1.2.2 跨库查询 1.3 拓展&#xff1a;SQL Server 中所有权和用户与架构的分离 1 SQL Server 跨库/服务器查询 1.1 跨库查询 在同一服务器下的跨库查询较为简单&#xff0c;示例…...

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

word转PDF文件变小，图片模糊

word论文29M&#xff0c;文件——另存为——只有1.5M左右&#xff0c;图片压缩严重&#xff0c;图片看不清。 word中很多大图&#xff0c;5M一张的图&#xff0c;所以word很大。 找了很多方法&#xff0c;转换后都在2M左右&#xff0c;勉强可以。 直到找到了这个&#xff0c…...

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

被删除并且被回收站清空的文件如何找回

文件的意外删除和回收站清空是许多用户面临的普遍问题。这种情况下&#xff0c;很多人会感到无助和焦虑&#xff0c;担心自己的重要文件永远丢失。然而&#xff0c;幸运的是&#xff0c;依然存在一些有效的方法能够帮助我们找回被删除并且被回收站清空的文件。 ▌被删除文件在…...

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

每日两题 131分割回文串 784字母大小写全排列（子集模版）

131 131 题目 给你一个字符串 s&#xff0c;请你将 s 分割成一些子串&#xff0c;使每个子串都是 回文串 。返回 s 所有可能的分割方案。 回文串 是正着读和反着读都一样的字符串。 示例 1&#xff1a; 输入&#xff1a;s “aab” 输出&#xff1a;[[“a”,“a”,“b”]…...

编程日记 2023/9/14 19:57:35

人工智能公司网站建设/网络宣传

本文是摘自别人的网站&#xff0c;自己读的书少&#xff0c;谨以此作为自己要读的书的一个书目列表吧。 原文地址&#xff1a;http://blog.sina.com.cn/s/blog_6aa1784101011hl5.html 正文&#xff1a; 一直有这么个想法&#xff0c;列一下我个人认为在学习和使用Java过程中可以…...

编程日记 2025/1/15 6:18:38

汕尾好网站建设推广/google关键词排名查询

概览 JpaRepository 继承 PagingAndSortingRepository 继承 CrudRepository 继承 Repository 1 Repository 这是一个空接口&#xff0c;主要是用来指定它的子接口是一个持久层接口 实现了Repository的接口默认就是一个持久层接口&#xff0c;会被容器管理起来&#xff1b;这就是…...

编程日记 2025/1/15 5:52:03

建立一个公司的网站吗/微信公众号营销

邮件发送通知用户操作&#xff0c;需申请一个163邮箱&#xff0c;并获取到smtp密码&#xff0c;获取smtp密码步骤如下1、在网易163邮箱首页&#xff0c;进入如下图所示的“邮箱中心”2、点击添加其他邮箱&#xff0c;然后进入一个设置界面3、点击客户端授权密码&#xff0c;然后…...

编程日记 2025/1/15 3:06:56

网站域名用公司注册信息查询/公司企业网站制作需要多少钱

在C语言和C中&#xff0c;经常会出现某一种数据类型所占的字节数为多大的问题&#xff0c;其实这些机器字长和编译器有关系&#xff0c;通过总结&#xff0c;如下图&#xff1a; 其中&#xff0c;彩色部分代表的意思是该类型在三种平台下所占字节大小不同&#xff0c;黑色说明…...

编程日记 2025/1/15 3:01:45

义乌网站制作多少钱/品牌营销策划案例ppt

【下载】下载SecureCRT SecureFX 8.1 Bundle版本软件&#xff0c;官网下载较麻烦&#xff0c;因此在此提供百度云连接。 链接&#xff1a;http://pan.baidu.com/s/1hsIjtSK 密码&#xff1a;nzxn 【安装】自行根据电脑位数选择x86、x64版本进行安装&#xff0c;傻瓜式安装即…...

编程日记 2025/1/15 1:37:39

网站备案期间能使用吗/中国十大广告公司排行榜

Html5 DataSet一.简单介绍二.简单示例三.传值场景1.点赞2.本地化翻译四.值的存取1.getAttribute、setAttribute 存取 dataset2.dataset API 存取 dataset3.类似“data-star-count”该如何处理&#xff1f;4. jQuery.attr 方法存取 dataset5. jQuery.data方法存取 dataset6.jQue…...

编程日记 2025/1/14 23:17:35