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

【Vue Router 3】入门

news 2026/3/30 13:19:06

简介

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

AI净界-RMBG-1.4入门指南：理解Alpha通道、PNG透明度与导出规范

AI净界-RMBG-1.4入门指南&#xff1a;理解Alpha通道、PNG透明度与导出规范 你是不是也遇到过这样的烦恼&#xff1f;拍了一张不错的照片&#xff0c;想换个背景发朋友圈&#xff0c;或者做电商需要把商品图抠出来&#xff0c;结果发现边缘抠得跟狗啃的一样&#xff0c;头发丝和…...

编程新知 2026/3/30 12:40:15

如何用Langchain来实现一个查询天气的AI智能体

上一篇&#xff0c;我们讲了如何用Langchain来搭建一个通义大语言模型应用。今天小编就来讲一讲如何用Langchain来实现一个查询天气的AI智能体。本文使用的大模型是智谱AI&#xff0c;采用Python代码来实现。我们需要先在官方网站申请一个开发的Key&#xff0c;在接下来的代码中…...

编程新知 2026/3/30 12:20:12

CentOS8网络管理大变革：从network.service到NetworkManager的全面解析

CentOS8网络管理架构深度解析&#xff1a;从传统命令到NetworkManager的进化之路 如果你是一位长期使用CentOS的系统管理员&#xff0c;最近升级到CentOS8后可能会遇到一个令人困惑的问题&#xff1a;当你习惯性地输入systemctl restart network命令时&#xff0c;系统却无情地…...

编程新知 2026/3/30 11:33:50

Youtu-Parsing镜像免配置：预置outputs目录权限+日志轮转自动配置

Youtu-Parsing镜像免配置&#xff1a;预置outputs目录权限日志轮转自动配置 1. 引言&#xff1a;告别繁琐配置&#xff0c;专注文档解析 如果你用过一些AI模型&#xff0c;肯定遇到过这样的麻烦&#xff1a;好不容易把服务跑起来了&#xff0c;结果发现生成的图片没地方保存&…...

编程新知 2026/3/30 9:51:57

Matlab APP Designer避坑指南：字符进度条不更新的解决方案

Matlab APP Designer避坑指南&#xff1a;字符进度条不更新的解决方案 在Matlab APP Designer开发过程中&#xff0c;进度条是用户交互体验的重要组成部分。许多开发者都遇到过这样的困扰&#xff1a;精心设计的字符进度条在运行时却"卡住"不动&#xff0c;直到整个计…...

编程新知 2026/3/30 9:29:51

OptiLLM性能基准测试：在AIME、IMO、LiveCodeBench上的惊人表现

OptiLLM性能基准测试&#xff1a;在AIME、IMO、LiveCodeBench上的惊人表现 【免费下载链接】optillm Optimizing inference proxy for LLMs 项目地址: https://gitcode.com/gh_mirrors/op/optillm OptiLLM是一款强大的AI推理优化代理工具&#xff0c;能够在零训练的情况…...

编程新知 2026/3/30 9:01:40

Artichoke 快速入门：5分钟学会安装和使用这个革命性 Ruby 实现

Artichoke 快速入门&#xff1a;5分钟学会安装和使用这个革命性 Ruby 实现 【免费下载链接】artichoke &#x1f48e; Artichoke is a Ruby made with Rust 项目地址: https://gitcode.com/gh_mirrors/ar/artichoke Artichoke 是一个用 Rust 和 Ruby 编写的革命性 Ruby …...

编程新知 2026/3/30 8:53:34

深度解析ShardingCore：EF Core分库分表架构实战与性能优化指南

深度解析ShardingCore&#xff1a;EF Core分库分表架构实战与性能优化指南 【免费下载链接】sharding-core high performance lightweight solution for efcore sharding table and sharding database support read-write-separation .一款ef-core下高性能、轻量级针对分表分库…...

编程新知 2026/3/30 6:26:51

保姆级教程：用SSC Tool 5.13为先楫HPM6E00EVK生成8轴EtherCAT从站代码（附XML配置避坑点）

先楫HPM6E00EVK实现8轴EtherCAT从站开发实战指南 在工业自动化领域&#xff0c;多轴协同控制的需求日益增长。对于嵌入式开发者而言&#xff0c;如何快速搭建一个稳定可靠的EtherCAT从站系统成为关键挑战。本文将基于先楫HPM6E00EVK开发板&#xff0c;详细解析从代码生成到实际…...

编程新知 2026/3/30 5:52:32

为什么92%的Java边缘项目因Classloader泄漏失败？揭秘3层隔离沙箱设计与实时热替换机制

第一章&#xff1a;Java边缘计算轻量级运行时开发概览边缘计算场景对运行时环境提出严苛要求&#xff1a;低内存占用&#xff08;通常 ≤ 64MB&#xff09;、毫秒级冷启动、有限依赖、原生支持资源约束设备&#xff08;如 ARM64 IoT 网关、工业 PLC&#xff09;。Java 生态传统…...

编程新知 2026/3/30 5:40:25