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

Vue3路由

news 2025/7/11 7:48:10

文章目录

  • 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

vscode里如何用git

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

编程新知 2025/6/21 12:50:31

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（二）

HoST框架核心实现方法详解 - 论文深度解读（第二部分） 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章： 论文深度解读 + 算法与代码分析（二） 作者机构： 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题： 人形机器人…...

编程新知 2025/6/17 5:29:50

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能&#xff0c;包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

编程新知 2025/6/21 3:36:25

.Net框架，除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

编程新知 2025/7/10 11:56:00

vscode（仍待补充）

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh&#xff1f; debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

编程新知 2025/7/9 11:18:39

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

编程新知 2025/7/4 14:40:43

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

编程新知 2025/6/25 3:04:08

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户&#xff0c;但你不希望用 root 权限运行 ns-3&#xff08;这是对的&#xff0c;ns3 工具会拒绝 root&#xff09;&#xff0c;你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案&#xff1a;创建非 roo…...

编程新知 2025/7/10 10:09:46

苍穹外卖--缓存菜品

1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得&#xff0c;如果用户端访问量比较大&#xff0c;数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据&#xff0c;减少数据库查询操作。 缓存逻辑分析&#xff1a; ①每个分类下的菜品保持一份缓存数据…...

编程新知 2025/7/8 6:05:27

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据 案例一 对于查询类API&#xff0c;查询的是单条数据&#xff0c;比如根据主键ID查询用户信息&#xff0c;sql如下&#xff1a; select id, name, age from user where id #{id}API默认返回的数据格式是多条的&#xff0c;如下&#xff1a; {&qu…...

编程新知 2025/7/7 3:03:26