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

【Vue Router 3】入门

news 文章来源：https://blog.csdn.net/2201_75288929/article/details/133818871 2025/4/21 10:09:55

简介

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

多输入多输出 | MATLAB实现CNN-BiGRU-Attention卷积神经网络-双向门控循环单元结合SE注意力机制的多输入多输出预测

多输入多输出 | MATLAB实现CNN-BiGRU-Attention卷积神经网络-双向门控循环单元结合SE注意力机制的多输入多输出预测 目录 多输入多输出 | MATLAB实现CNN-BiGRU-Attention卷积神经网络-双向门控循环单元结合SE注意力机制的多输入多输出预测预测效果基本介绍程序设计往期精彩参考…...

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

阿里云r7服务器内存型CPU采用

阿里云服务器ECS内存型r7实例是第七代内存型实例规格族&#xff0c;CPU采用第三代Intel Xeon可扩展处理器&#xff08;Ice Lake&#xff09;&#xff0c;基频2.7 GHz&#xff0c;全核睿频3.5 GHz&#xff0c;计算性能稳定&#xff0c;CPU内存比1:8&#xff0c;2核16G起步&#…...

编程日记 2023/10/14 14:26:39

Godot2D角色导航-自动寻路教程（Godot设置导航代理的目标位置）

文章目录 创建导航NavigationAgent2D节点设置目标位置其他文章 创建导航 首先&#xff0c;创建一个基本的场景&#xff0c;下面的文章讲解了如何创建一个基本的导航场景&#xff0c;点击如下链接前往该文章&#xff1a; Godot2D角色导航-自动寻路教程 NavigationAgent2D节点 …...

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

R语言实现向量自回归和误差修正模型——附实战代码

大家好&#xff0c;我是带我去滑雪&#xff01; 向量自回归&#xff08;VAR&#xff09;模型和误差修正模型&#xff08;ECM&#xff09;是时间序列分析中常用的两种模型&#xff0c;它们用于研究多个变量之间的动态关系。VAR 模型适用于研究多个相关变量之间的相互影响和动态关…...

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

原理：用UE5制作一个2D游戏

选中资产图片右键--Sprite Actions--Apply Paper2D Texture Settings 制作场景 把它丢到场景里&#xff0c;并把坐标归零 创建图块集tileset 打开新建的tile set&#xff0c;根据最小图块设置最小尺寸单元 选择需要的图块单元&#xff0c;add box 对新建的tile set右键创建til…...

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

【ARM 嵌入式 编译系列 11.3 -- GCC attribute packed noreturn constructor 介绍】

文章目录 GCC 的 __attribute__ 是一个编译器扩展特性，允许开发者在源代码中设置函数属性（function attributes）、变量属性（variable attributes）和类型属性（type attributes）。这些属性可以影响函数、变量或类型的行为。 以下是一些常见的 __attribute__ 属性： __at…...

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

主从Reactor高并发服务器

文章目录 Reactor模型的典型分类单Reactor单线程单Reactor多线程多Reactor多线程本项目中实现的主从Reactor One Thread One Loop各模型的优点与缺点 项目分解Reactor服务器模块BufferSocketChannelEpollerTimerWheelEventLoopAnyConnectionAcceptorLoopThreadLoopThreadPoolTc…...

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

文心一言Plugin实战来了，测试开发旅游攻略助手

刚刚过去的8月&#xff0c;百度WAVE SUMMIT 深度学习开发者大会上&#xff0c;重磅发布文心一言的五个原生插件&#xff1a;百度搜索、览卷文档&#xff08;基于文档的交互&#xff09;、E 言易图&#xff08;数据洞察图表生成&#xff09;、说图解画&#xff08;基于图片的交互…...

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

微服务13-Seata的四种分布式事务模式

文章目录 XA模式实现XA模式 AT模式AT模式的脏写问题&#xff08;对同数据并发写的问题&#xff09;其他事务不获取全局锁的一个情况&#xff08;AT模式写隔离的实现&#xff09;实现AT模式 TCC模式TCC实现我们怎么样去判断是否空回滚和业务悬挂&#xff1f;业务分析 Saga模式总…...

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

C结构体内定义结构体，不能直接赋值。

现像&#xff1a; 如下代码&#xff1a; 头文件&#xff1a; typedef struct aBlinkGpioPinOutAbst_{void (*initAsOutput)(void);void (*high)(void);void (*low)(void); }aBlinkGpioPinOutAbst;typedef struct aBlinkGpioAbst_{ #if GPIO_CONFIG_PA0 GPIO_CONFIG_AS_OUTPU…...

编程日记 2023/10/14 14:16:28