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

【Vue Router 3】入门

news 2025/7/7 15:07:34

简介

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（Single-page Application）的构建更加容易。 Vue Router的功能： 嵌套的路由/视图映射模块化的、基于组件的router配置route params, query, wildcards由Vue过渡系统支持的视图过渡效果细粒度（fine-grained…...

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

SpringMVC中@RequestMapping注解的详细说明

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

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

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

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

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

这里写自定义目录标题定理定理 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语句五、其他一、需求公告列表，需要支持以下搜索 1、根据文本输入，模糊搜索公告标题和公告正文。 2、支持公告类型搜索，单选 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集群升级 （1）概念搭建K8S集群的方式有很多种，比如二进制，kubeadm…...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

14天阅读挑战赛当你累了，要学会休息，而不是放弃！ 目录一、JWT简介 1.1 什么是JWT 1.2 为什么要使用JWT，与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 结构丰富的数据结构持久性不支持支持分布式存储客户端哈希分片/一致性哈希多种方式，主从、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，直接存储器访问)是计算机科学中的一种内存访问技术。它允许某些计算机内部的硬件子系统可以独立地直接读写系统内存，而不需中央处理器（CPU）介入处理。…...

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

Lua教程

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

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

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

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

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

（十）学生端搭建

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

编程新知 2025/7/6 10:30:39

Java 8 Stream API 入门到实践详解

一、告别 for 循环！ 传统痛点： Java 8 之前，集合操作离不开冗长的 for 循环和匿名类。例如，过滤列表中的偶数： List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

编程新知 2025/7/7 9:09:17

深入理解JavaScript设计模式之单例模式

目录什么是单例模式为什么需要单例模式常见应用场景包括单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量惰性单例通用的惰性单例结语什么是单例模式单例模式（Singleton Pattern&#…...

编程新知 2025/7/5 0:22:43

postgresql|数据库|只读用户的创建和删除（备忘）

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

编程新知 2025/6/21 18:39:26