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

Vue3路由

news 2025/12/14 23:49:01

文章目录

  • 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

ffmpeg（四）：滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

编程新知 2025/11/9 11:32:13

C# SqlSugar：依赖注入与仓储模式实践

C# SqlSugar&#xff1a;依赖注入与仓储模式实践 在 C# 的应用开发中&#xff0c;数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护&#xff0c;许多开发者会选择成熟的 ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;SqlSugar 就是其中备受…...

编程新知 2025/11/25 6:49:02

ios苹果系统，js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

编程新知 2025/12/4 2:37:03

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

编程新知 2025/12/13 23:42:56

Python 训练营打卡 Day 47

注意力热力图可视化 在day 46代码的基础上&#xff0c;对比不同卷积层热力图可视化的结果 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms from torch.utils.data import DataLoader import matplotlib.pypl…...

编程新知 2025/11/24 9:42:16

水泥厂自动化升级利器：Devicenet转Modbus rtu协议转换网关

在水泥厂的生产流程中&#xff0c;工业自动化网关起着至关重要的作用&#xff0c;尤其是JH-DVN-RTU疆鸿智能Devicenet转Modbus rtu协议转换网关&#xff0c;为水泥厂实现高效生产与精准控制提供了有力支持。 水泥厂设备众多&#xff0c;其中不少设备采用Devicenet协议。Devicen…...

编程新知 2025/12/12 8:05:24

面试高频问题

文章目录 &#x1f680; 消息队列核心技术揭秘&#xff1a;从入门到秒杀面试官1️⃣ Kafka为何能"吞云吐雾"&#xff1f;性能背后的秘密1.1 顺序写入与零拷贝&#xff1a;性能的双引擎1.2 分区并行&#xff1a;数据的"八车道高速公路"1.3 页缓存与批量处理…...

编程新知 2025/11/17 0:00:05

OCR MLLM Evaluation

为什么需要评测体系&#xff1f;——背景与矛盾 ​​ 能干的事&#xff1a;​​ 看清楚发票、身份证上的字&#xff08;准确率>90%&#xff09;&#xff0c;速度飞快&#xff08;眨眼间完成&#xff09;。​​干不了的事&#xff1a;​​ 碰到复杂表格&#xff08;合并单元…...

编程新知 2025/10/6 15:50:41

针对药品仓库的效期管理问题，如何利用WMS系统“破局”

案例&#xff1a; 某医药分销企业&#xff0c;主要经营各类药品的批发与零售。由于药品的特殊性&#xff0c;效期管理至关重要&#xff0c;但该企业一直面临效期问题的困扰。在未使用WMS系统之前&#xff0c;其药品入库、存储、出库等环节的效期管理主要依赖人工记录与检查。库…...

编程新知 2025/12/5 20:23:13

鸿蒙HarmonyOS 5军旗小游戏实现指南

1. 项目概述 本军旗小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;采用DevEco Studio实现&#xff0c;包含完整的游戏逻辑和UI界面。 2. 项目结构 /src/main/java/com/example/militarychess/├── MainAbilitySlice.java // 主界面├── GameView.java // 游戏核…...

编程新知 2025/12/8 9:32:22