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

【Vue Router 3】入门

news 2025/9/14 21:27:39

简介

Vue Router让SPA（Single-page Application）的构建更加容易。

Vue Router的功能：

  • 嵌套的路由/视图映射
  • 模块化的、基于组件的router配置
  • route params, query, wildcards
  • 由Vue过渡系统支持的视图过渡效果
  • 细粒度（fine-grained）的导航控制
  • 自动的激活CSS类的链接
  • HTML5 hash模式或history模式
  • 可自定义的滚动行为

安装

使用CDN直接引入

从https://unpkg.com/vue-router@3/dist/vue-router.js下载文件。在Vue加载后加载Vue Router会自动安装它到Vue。

<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>

npm

在模块化系统中，先使用npm安装vue-router，

npm install vue-router

如果不使用全局的script的标签引入vue和vue router，那么可以使用Vue.use来安装vue router，

import Vue from 'vue'
import VueRouter from 'vue-router'Vue.use(VueRouter)

Vue CLI

使用Vue CLI的项目可以运行下面的命令来以插件形式安装vue router，但是要注意这样做会覆盖你的App.vue文件，注意备份！

vue add router

从Github克隆最新版本

git clone https://github.com/vuejs/vue-router.git node_modules/vue-router
cd node_modules/vue-router
npm install
npm run build

入门

Vue创建的应用程序由一个个组件构成，Vue Router的路由映射则将这些组件映射到路由上，如此便完成了在哪里渲染什么的目标。

在线快速尝鲜Vue

一个基础示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/vue@2/dist/vue.js"></script><script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script>
</head><body><div id="app"><h1>Hello App!</h1><p><!-- router-link会被渲染为a标签，to属性指定目标链接 --><router-link to="/foo">Go to Foo</router-link><router-link to="/bar">Go to Bar</router-link></p><!-- route匹配到的组件将被渲染到这里 --><router-view></router-view></div><script>// 组件定义const Foo = { template: '<div>foo</div>' }const Bar = { template: '<div>bar</div>' }// 定义routesconst routes = [{ path: '/foo', component: Foo },{ path: '/bar', component: Bar }]// 创建router实例const router = new VueRouter({routes // `routes: routes`的简写})// 创建和挂载根Vue实例const app = new Vue({router, // 注入路由，于是我们可以通过this.$router访问router，通过this.$route访问当前routecomputed: {username() {return this.$route.params.username}},methods: {goBack() {window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')}}}).$mount('#app')</script>
</body></html>

<router-link>在路由匹配成功时，会自动设置.router-link-activeclass属性值。

参考资料

  • Installation-Vue Router 3
  • Get Started-Vue Router 3

相关文章：

【Vue Router 3】入门

简介 Vue Router让SPA&#xff08;Single-page Application&#xff09;的构建更加容易。 Vue Router的功能&#xff1a; 嵌套的路由/视图映射模块化的、基于组件的router配置route params, query, wildcards由Vue过渡系统支持的视图过渡效果细粒度&#xff08;fine-grained…...

编程日记 2023/10/14 14:51:10

SpringMVC中@RequestMapping注解的详细说明

RequestMapping 是Spring MVC中一个用于映射HTTP请求和控制器方法之间关系的注解。它用于定义控制器方法如何响应特定的HTTP请求&#xff0c;包括GET、POST、PUT、DELETE等。以下是RequestMapping注解的详细说明&#xff1a; 基本用法&#xff1a; RequestMapping("/examp…...

编程日记 2023/10/14 14:50:09

Java - 发送 HTTP 请求的及其简单的方法模块 - hutool

目录 一、POST 传递简单的字符串内容 .body(params)二、POST 传递 Json 数据&#xff0c;以表单类型传递 .form(params)二、POST 传递 Json 数据&#xff0c;以表单类型传递 .form(params) 和 .body(params) 方法效果等效的思路四、传统接口带 token 验证的代码模板参考链接 一…...

编程日记 2023/10/14 14:49:08

Nie et al. 2010 提出的不等式定理

这里写自定义目录标题 定理 定理 For any vector a a a and b b b, we have ∥ a ∥ 2 − ∥ a ∥ 2 2 2 ∥ b ∥ 2 ≤ ∥ b ∥ 2 − ∥ b ∥ 2 2 2 ∥ b ∥ 2 \|a\|_{2} - \frac{\|a\|_{2}^{2}}{2\|b\|_{2}} \leq \|b\|_{2} - \frac{\|b\|_{2}^{2}}{2\|b\|_{2}} ∥a∥2​−…...

编程日记 2023/10/14 14:47:03

chatGLM2-6B模型LoRA微调数据集实现大模型的分类任务

【TOC】 1.chatglm介绍 ChatGLM 模型是由清华大学开源的、支持中英双语问答的对话语言模型，并针对中文进行了优化。该模型基于 General Language Model（GLM）架构，具有 62 亿参数。结合模型量化技术，用户可以在消费级的显卡上进行本地部署。 ChatGLM 具备以下特点： 充…...

编程日记 2023/10/14 14:46:02

Elasticsearch6实践

目录 目录 一、需求 二、ES索引设计 三、页面搜索条件 四、ES的分页搜索DSL语句 五、其他 一、需求 公告列表&#xff0c;需要支持以下搜索 1、根据文本输入&#xff0c;模糊搜索公告标题和公告正文。 2、支持公告类型搜索&#xff0c;单选 3、支持根据公告所在省市区搜…...

编程日记 2023/10/14 14:45:00

云原生Kubernetes：K8S集群版本升级(v1.20.6 - v1.20.15)

目录 一、理论 1.K8S集群升级 2.集群概况 3.升级集群 4.验证集群 二、实验 1.升级集群 2.验证集群 三、问题 1.给node1节点打污点报错 一、理论 1.K8S集群升级 &#xff08;1&#xff09;概念 搭建K8S集群的方式有很多种&#xff0c;比如二进制&#xff0c;kubeadm…...

编程日记 2023/10/14 14:43:58

毅速丨3D打印随形水路模具日常如何保养

3D打印随形水路的蜿蜒曲折甚至细微水路&#xff0c;使得其容易发生堵塞并难以清洗&#xff0c;一旦堵塞将对生产带来不小的影响。事实上&#xff0c;堵塞的发生是逐步发展的&#xff0c;所以在生产过程中应注意监控&#xff0c;一旦发现冷却效果下降应及时检查。以下是一些防患…...

编程日记 2023/10/14 14:42:57

尚品甄选2023全新SpringBoot+SpringCloud企业级微服务项目

最适合新手入门的SpringBootSpringCloud企业级微服务项目来啦&#xff01;如果你已经学习了Java基础、SSM框架、SpringBoot、SpringCloud&#xff0c;想找一个项目来实战练习&#xff1b;或者你刚刚入行&#xff0c;需要可以写到简历中的微服务架构项目&#xff01; 项目采用前…...

编程日记 2023/10/14 14:41:56

204、RabbitMQ 之 使用 topic 类型的 Exchange 实现通配符路由

目录 ★ 使用topic实现通配符路由代码演示topic通配符类型的Exchange代码演示:ConstantUtilConnectionUtilProducerConsumer01执行结果生产者消费者01消费者02 完整代码&#xff1a;ConstantUtilConnectionUtilProducerConsumer01Consumer02pom.xml ★ 使用topic实现通配符路由…...

编程日记 2023/10/14 14:40:54

qq视频录制教程，让你的视频更加精彩

“qq视频可以录制吗&#xff1f;浏览qq的时候发现一段有趣的视频&#xff0c;点击下载却一直显示失败&#xff0c;朋友叫我把视频录制下来&#xff0c;但是我不知道怎么操作&#xff0c;想问问大家&#xff0c;有没有办法录制qq的视频。” 在信息化的时代&#xff0c;通过视频…...

编程日记 2023/10/14 14:38:50

(滑动窗口) 76. 最小覆盖子串 ——【Leetcode每日一题】

❓76. 最小覆盖子串 难度&#xff1a;困难 给你一个字符串 s 、一个字符串 t 。返回 s 中涵盖 t 所有字符的最小子串。如果 s 中不存在涵盖 t 所有字符的子串&#xff0c;则返回空字符串 "" 。 注意&#xff1a; 对于 t 中重复字符&#xff0c;我们寻找的子字符串…...

编程日记 2023/10/14 14:37:50

grep批量筛选指定目录下的所有日志并写入文件内

背景&#xff1a;在指定目录下&#xff0c;该目录下有上百个日志文件&#xff0c;这些文件以.log结尾 需求&#xff1a;遍历这些日志文件&#xff0c;对每个日志文件进行grep筛选&#xff0c;筛选出包含namexxx和 "server_port":"8088"的内容&#xff0c;并…...

编程日记 2023/10/14 14:36:49

JVM第三讲：JVM 基础-字节码的增强技术详解

JVM 基础-字节码的增强技术详解 本文是JVM第三讲&#xff0c;JVM 基础-字节码的增强技术。在上文中&#xff0c;着重介绍了字节码的结构&#xff0c;这为我们了解字节码增强技术的实现打下了基础。字节码增强技术就是一类对现有字节码进行修改或者动态生成全新字节码文件的技术…...

编程日记 2023/10/14 14:35:48

JWT前后端分离在项目中的应用

14天阅读挑战赛当你累了&#xff0c;要学会休息&#xff0c;而不是放弃&#xff01; 目录 一、JWT简介 1.1 什么是JWT 1.2 为什么要使用JWT&#xff0c;与session的区别 1.3 JWT组成及工作原理和流程 二、JWT工具类解析 2.1 生成JWT 2.2 解析oldJwt 2.3 复制JWT并延时…...

编程日记 2023/10/14 14:34:47

系统架构师备考倒计时23天(每日知识点)Redis篇

Redis篇 1.Redis与Memcache能力对比 工作MemCacheRedis数据类型简单 key/value 结构丰富的数据结构持久性不支持支持分布式存储客户端哈希分片/一致性哈希多种方式&#xff0c;主从、Sentinel、Cluster 等多线程支持支持支持(Redis5.0及以前版本不支持)内存管理私有内存池/内…...

编程日记 2023/10/14 14:33:46

WIN11系统设置重启与睡眠唤醒后自动拨号

文章目录 1. win x快捷键后选择计算机管理2. 编辑名称3. 选择计算机启动时4. 启动程序5. 输入脚本6. 勾选选项7. 填写配置8. 新建触发器9. 设置触发器10. 确定之后完成创建 1. win x快捷键后选择计算机管理 在任务计划程序中创建基本任务 2. 编辑名称 3. 选择计算机启动时 4…...

编程日记 2023/10/14 14:32:45

【【萌新的SOC学习之AXI-DMA环路测试】】

萌新的SOC学习之AXI-DMA环路测试 AXI DMA环路测试 DMA(Direct Memory Access&#xff0c;直接存储器访问)是计算机科学中的一种内存访问技术。它允许某些计算机内部的硬件子系统可以独立地直接读写系统内存&#xff0c;而不需中央处理器&#xff08;CPU&#xff09;介入处理。…...

编程日记 2023/10/14 14:31:44

Lua教程

Lua教程(简单易懂)-CSDN博客 博客相关解释&#xff1a; 5、循环 a {"a", "b"}for i, v in ipairs(a) doprint(i, v)end 代码创建了一个名为 a 的数组&#xff0c;并使用 ipairs 迭代这个数组的元素。运行结果显示了每个元素的索引&#xff08;下标&am…...

编程日记 2023/10/14 14:30:43

《Node.js+Express+MongoDB+Vue.js全栈开发实战》简介

今天介绍的这本书是《Node.jsExpressMongoDBVue.js全栈开发实战》。该书由清华大学出版社于2023年1月出版 外观 从书名故名思议&#xff0c;就是基于Node.jsExpressMongoDBVue.js来实现企业级应用全栈开发。 封面风格比较简约&#xff0c;插图是一张类似于罗马时代战车形象&…...

编程日记 2023/10/14 14:29:42

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

编程新知 2025/9/13 15:18:24

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 抽象 现代智能交通系统 &#xff08;ITS&#xff09; 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 &#xff08;…...

编程新知 2025/9/14 13:50:41

Mac软件卸载指南，简单易懂！

刚和Adobe分手&#xff0c;它却总在Library里给你写"回忆录"&#xff1f;卸载的Final Cut Pro像电子幽灵般阴魂不散&#xff1f;总是会有残留文件&#xff0c;别慌&#xff01;这份Mac软件卸载指南&#xff0c;将用最硬核的方式教你"数字分手术"&#xff0…...

编程新知 2025/8/13 4:43:34

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

编程新知 2025/7/5 23:14:36

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

编程新知 2025/7/21 4:41:44

Matlab | matlab常用命令总结

常用命令 一、 基础操作与环境二、 矩阵与数组操作（核心）三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结，涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...

编程新知 2025/8/11 1:05:59

C# 求圆面积的程序（Program to find area of a circle）

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

编程新知 2025/9/9 10:10:10

在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能

1. 开发环境准备 ​​安装DevEco Studio 3.1​​&#xff1a; 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK ​​项目配置​​&#xff1a; // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...

编程新知 2025/8/10 0:21:56

网页端 js 读取发票里的二维码信息（图片和PDF格式）

起因 为了实现在报销流程中&#xff0c;发票不能重用的限制&#xff0c;发票上传后&#xff0c;希望能读出发票号&#xff0c;并记录发票号已用&#xff0c;下次不再可用于报销。 基于上面的需求&#xff0c;研究了OCR 的方式和读PDF的方式&#xff0c;实际是可行的&#xff…...

编程新知 2025/9/13 0:08:42

EasyRTC音视频实时通话功能在WebRTC与智能硬件整合中的应用与优势

一、WebRTC与智能硬件整合趋势​ 随着物联网和实时通信需求的爆发式增长&#xff0c;WebRTC作为开源实时通信技术&#xff0c;为浏览器与移动应用提供免插件的音视频通信能力&#xff0c;在智能硬件领域的融合应用已成必然趋势。智能硬件不再局限于单一功能&#xff0c;对实时…...

编程新知 2025/9/11 11:25:05