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

【Vue Router 3】入门

news 2026/2/9 21:07: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

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

编程新知 2026/2/8 4:37:15

（十）学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

编程新知 2026/2/5 4:23:32

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

编程新知 2026/2/4 4:25:40

【解密LSTM、GRU如何解决传统RNN梯度消失问题】

解密LSTM与GRU&#xff1a;如何让RNN变得更聪明&#xff1f; 在深度学习的世界里&#xff0c;循环神经网络&#xff08;RNN&#xff09;以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而&#xff0c;传统RNN存在的一个严重问题——梯度消失&#…...

编程新知 2025/12/24 1:45:14

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

编程新知 2025/9/30 16:39:11

django filter 统计数量 按属性去重

在Django中&#xff0c;如果你想要根据某个属性对查询集进行去重并统计数量&#xff0c;你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求&#xff1a; 方法1&#xff1a;使用annotate()和Count 假设你有一个模型Item&#xff0c;并且你想…...

编程新知 2026/1/11 2:37:51

最新SpringBoot+SpringCloud+Nacos微服务框架分享

文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的&#xff0c;根据Excel列的需求预估的工时直接打骨折&#xff0c;不要问我为什么&#xff0c;主要…...

编程新知 2026/2/1 23:39:12

【Web 进阶篇】优雅的接口设计：统一响应、全局异常处理与参数校验

系列回顾&#xff1a; 在上一篇中&#xff0c;我们成功地为应用集成了数据库&#xff0c;并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了&#xff01;但是&#xff0c;如果你仔细审视那些 API&#xff0c;会发现它们还很“粗糙”&#xff1a;有…...

编程新知 2026/1/22 20:46:43

Spring是如何解决Bean的循环依赖：三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中，Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌，形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路，例如： 双向依赖：Bean A 依赖 Bean B，同时 Bean B 也依赖 Bean A（A↔B）。链条循环： Bean A → Bean…...

编程新知 2025/7/25 1:21:53

Java编程之桥接模式

定义 桥接模式&#xff08;Bridge Pattern&#xff09;属于结构型设计模式&#xff0c;它的核心意图是将抽象部分与实现部分分离&#xff0c;使它们可以独立地变化。这种模式通过组合关系来替代继承关系&#xff0c;从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...

编程新知 2026/1/23 10:28:48