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

Vue Router路由原理

news 来源：原创 2025/5/14 1:35:12

Vue Router 是 Vue.js 官方的路由管理器，它与 Vue.js 核心深度集成，使得构建单页应用（SPA）变得非常容易。Vue Router 的主要功能包括动态路由匹配、嵌套路由、编程式导航、命名路由、路由守卫等

Vue Router 原理

单页应用（SPA）:
- Vue Router 实现了单页应用的路由管理，通过 URL 的变化来渲染不同的视图，而不需要重新加载整个页面。
路由匹配:
- Vue Router 会根据当前 URL 匹配相应的路由规则，并渲染对应的组件。
- 路由规则定义了 URL 模式和对应的组件映射关系。
历史模式:
- Vue Router 支持两种历史模式：hash 和 history。
  - hash 模式使用 URL 的 hash 部分（例如 http://example.com/#/about），适用于所有浏览器。
  - history 模式使用 HTML5 的 History API（例如 http://example.com/about），提供了更美观的 URL，但需要服务器配置支持。
动态路由:
- Vue Router 支持动态路由匹配，可以通过路径参数（例如 /user/:id）来捕获 URL 中的动态部分。
嵌套路由:
- 支持嵌套路由，可以在一个路由组件中嵌套另一个路由组件，实现复杂的页面结构。
编程式导航:
- 除了通过 URL 导航外，还可以通过编程方式（例如 this.$router.push）进行导航。
路由守卫:
- 提供了多种路由守卫（全局守卫、路由独享守卫、组件内守卫），可以在导航过程中进行权限控制、数据预加载等操作。

Vue Router 使用方法

安装 Vue Router

首先，你需要安装 Vue Router：

npm install vue-router

创建路由实例

在项目中创建一个路由配置文件，例如 router/index.js：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home.vue'
import About from '@/components/About.vue'Vue.use(Router)export default new Router({mode: 'history', // 使用 history 模式routes: [{path: '/',name: 'Home',component: Home},{path: '/about',name: 'About',component: About}]
})

在 Vue 实例中使用路由

在 main.js 中引入并使用路由实例：

import Vue from 'vue'
import App from './App.vue'
import router from './router'Vue.config.productionTip = falsenew Vue({router,render: h => h(App)
}).$mount('#app')

在模板中使用路由

在 App.vue 中使用 <router-view> 标签来渲染匹配到的组件：

<template><div id="app"><router-link to="/">Home</router-link> |<router-link to="/about">About</router-link><router-view></router-view></div>
</template><script>
export default {name: 'App'
}
</script>

编程式导航

除了使用 <router-link> 进行导航外，还可以通过编程方式导航：

// 跳转到指定路径
this.$router.push('/about')// 带查询参数的跳转
this.$router.push({ path: '/about', query: { id: 123 } })// 命名路由的跳转
this.$router.push({ name: 'About', params: { id: 123 } })

嵌套路由

在路由配置中定义嵌套路由：

export default new Router({routes: [{path: '/user/:id',component: User,children: [{path: 'profile',component: UserProfile},{path: 'posts',component: UserPosts}]}]
})

在 User.vue 中使用 <router-view> 渲染子路由：

<template><div><h1>User {{ $route.params.id }}</h1><router-view></router-view></div>
</template>

路由守卫

在路由配置中添加路由守卫：

const router = new Router({routes: [// 路由配置]
})router.beforeEach((to, from, next) => {// 全局前置守卫console.log('Navigating to:', to.path)next()
})router.afterEach((to, from) => {// 全局后置钩子console.log('Navigated to:', to.path)
})

Vue Router路由原理

Vue Router 是 Vue.js 官方的路由管理器，它与 Vue.js 核心深度集成，使得构建单页应用（SPA）变得非常容易。Vue Router 的主要功能包括动态路由匹配、嵌套路由、编程式导航、命名路由、路由守卫等 Vue Router 原理单页应用&#x…...

编程日记 2025/5/14 1:35:12

Tauri v1 与 v2 配置对比

本文档对比 Tauri v1 和 v2 版本的配置结构和内容差异，帮助开发者了解版本变更并进行迁移。配置结构变化 v1 配置结构 {"package": { ... },"tauri": { "allowlist": { ... },"bundle": { ... },"security":…...

编程日记 2025/5/14 1:25:06

详解 MyBatis-Plus 框架中 QueryWrapper 类

QueryWrapper 一、 QueryWrapper 的概念为什么需要 QueryWrapper？ 二、 QueryWrapper 的基本使用1. 创建 QueryWrapper 实例2. 添加查询条件3. 执行查询三、 QueryWrapper 的常见方法1. 基本条件方法1.1 eq - 等于1.2 ne - 不等于1.3 gt - 大于1.4 ge - 大于等于1.…...

编程日记 2025/5/14 1:30:05

小米MiMo-7B大模型：解锁推理潜力的新传奇！

在大语言模型（LLMs）蓬勃发展的时代，推理能力成为衡量模型优劣的关键指标。今天为大家解读的这篇论文，介绍了小米的MiMo-7B模型，它通过独特的预训练和后训练优化，展现出强大的推理实力，快来一探究…...

编程日记 2025/5/14 1:23:23

联邦学习的收敛性分析(全设备参与，不同本地训练轮次)

联邦学习的收敛性分析在联邦学习中，我们的目标是分析全局模型的收敛性，考虑设备异构性（不同用户的本地训练轮次不同）和数据异质性（用户数据分布不均匀）。以下推导从全局模型更新开始，逐步引入假设并推导期望损失的递减关系，最终给出收敛性结论。 1. 全局模型更新与泰…...

编程日记 2025/5/1 19:21:25

硬件工程师面试常见问题（10）

第四十六问：锁存器，触发器，寄存器三者的区别触发器：能够存储一位二值信号的基本单元电路统称为 "触发器"。（单位） 锁存器：一位触发器只能传送或存储一位数据，而在实际工…...

编程日记 2025/5/1 19:16:11

1295. 统计位数为偶数的数字

题目解法一遍历数组挨个判断元素位数并统计（我的第一想法） class Solution { public:int findNumbers(vector<int>& nums) {int result 0;for(int n: nums){if(judge(n)) result;}return result;}bool judge(int a){int sum 1;a a / 10…...

编程日记 2025/5/1 19:15:06

文章题目：Social participation patterns and associations with subsequent cognitive function in older adults with cognitive impairment: a latent class analysis DOI：10.3389/fmed.2025.1493359 中文标题：认知障碍老年人的社会参与模…...

编程日记 2025/5/14 1:30:05

楼宇智能化四章【期末复习】

四、火灾自动报警系统结构组成：火灾探测器、区域报警器、集中报警器形式：1. 多线制系统 2.总线制系统 3.集中智能系统 4.分布智能系统 5.网络通信系统工作原理：以下是关于火灾自动报警系统及相关灭火系统的详细解答： 1. 火灾自动报警系统有哪几种形式？区…...

编程日记 2025/5/1 19:02:28

Splunk 使用Role 实现数据隔离

很多人知道 Splunk 有很多自带的Role, 今天我就要说说定制化的Role: 1: 在创建新role 的界面: 2: 在如下的界面，可以定制allow index name： 3：创建好新Role 后，在SAML 添加新的group 的时候，就可以看到Role 给某个group： 4：这样一个特定组的人来申请Splunk 权限，就可…...

编程日记 2025/5/1 19:00:19

Learning vtkjs之ImplicitBoolean

隐式函数布尔操作介绍 vtkImplicitBoolean 允许对隐式函数（如平面、球体、圆柱体和盒子）进行布尔组合。操作包括并集、交集和差集。可以指定多个隐式函数（所有函数都使用相同的操作进行组合）。支持的操作：‘UNION…...

编程日记 2025/5/1 18:56:06

LabelVision - yolo可视化标注工具

LabelVision是一款可视化图像标注工具,主要用于计算机视觉研究中的各种标注任务。支持多边形、矩形、圆形等多种标注方式，并且可以输出JSON、COCO等多种数据格式，方便与其他软件和框架进行集成和互操作。 ‌ 通过它可以很轻易的对图像进行标注,适合Y…...

编程日记 2025/5/1 18:48:45

系统分析师-第十五章

学习目标通过参加考试，训练学习能力，而非单纯以拿证为目的。 1.在复习过程中，训练快速阅读能力、掌握三遍读书法、运用番茄工作法。 2.从底层逻辑角度理解知识点，避免死记硬背。 3.通过考试验证学习效果。学习阶段快速阅读 …...

编程日记 2025/5/1 18:44:33

大连理工大学选修课——机器学习笔记（3）：KNN原理及应用

KNN原理及应用机器学习方法的分类基于概率统计的方法 K-近邻（KNN）贝叶斯模型最小均值距离最大熵模型条件随机场（CRF）隐马尔可夫模型（HMM） 基于判别式的方法决策树（DT）感知机…...

编程日记 2025/5/1 18:40:18

09 Python字典揭秘：数据的高效存储

文章目录一.字典是什么1.字典的特点二.字典的创建和使用三.字典的操作1.访问元素2.修改元素3.删除元素4.遍历字典5.成员运算四.字典方法1.获取字典中的指定元素2.获取字典中的元素3.字典合并4.删除元素一.字典是什么在 Python 中，字典（dict&#x…...

编程日记 2025/5/1 18:34:02

20250430在ubuntu14.04.6系统上完成编译NanoPi NEO开发板的FriendlyCore系统【严重不推荐，属于没苦硬吃】

【开始编译SDK之前需要更新源】 rootrootubuntu:~/friendlywrt-h3$ sudo apt update 【这两个目录你在ubuntu14.04.6系统上貌似git clone异常了】 Y:\friendlywrt-h3\out\wireguard Y:\friendlywrt-h3\kernel\exfat-nofuse 【需要单线程编译文件系统，原因不明】 Y:…...

编程日记 2025/5/1 18:24:42

第五部分：进阶项目实战

在前面的学习中，我们已经掌握了图像和视频的基础操作、增强滤波、特征提取以及一些基础的目标检测方法。现在，我们将综合运用这些知识来构建一些更复杂、更实用的应用项目。这一部分的项目将结合前面学到的技术，并介绍一些新的概念和工具&a…...

编程日记 2025/5/1 18:11:11

【Linux】记录一个有用PS1

PS1 是用来定义shell提示符的环境变量下面是一个带有颜色和丰富信息的 Linux PS1 配置示例，包含用户名、主机名、路径、时间、Git 分支和退出状态提示： # 添加到 ~/.bashrc 文件末尾 PS1\[\e[1;32m\]\u\[\e[m\] # 绿色粗体用户名 PS…...

编程日记 2025/5/14 1:12:57

【SpringBoot】基于mybatisPlus的博客管理系统（2）

目录 1.实现用户登录 Jwt令牌 1.引入依赖 2.生成令牌（token） Controller Service Mapper 2.实现强制登录定义拦截器： 配置拦截器： 1.实现用户登录在之前的项目登录中，我使用的是Session传递用户信息实现校验…...

编程日记 2025/5/1 18:07:01

免费在Colab运行Qwen3-0.6B——轻量高性能实战

Qwen一直在默默地接连推出新模型。每个模型都配备了如此强大的功能和高度量化的规模，让人无法忽视。继今年的QvQ、Qwen2.5-VL和Qwen2.5-Omni之后，Qwen团队现在发布了他们最新的模型系列——Qwen3。这次他们不是发布一个而是发布了八个不同的模型——参数范围从6亿到235…...

编程日记 2025/5/1 18:02:52

精益数据分析（35/26）：SaaS商业模式关键指标解析

精益数据分析（35/26）：SaaS商业模式关键指标解析在创业与数据分析的征程中，我们持续探索不同商业模式的运营奥秘。今天，我们带着共同进步的期望，深入研读《精益数据分析》，聚焦SaaS商业模式&am…...

编程日记 2025/5/4 21:02:09

【论文速读】《Scaling Scaling Laws with Board Games》

论文链接：https://arxiv.org/pdf/2104.03113 《Scaling Scaling Laws with Board Games》：探索棋盘游戏中的扩展规律摘要如今，机器学习领域中规模最大的实验所需的资源，超出了仅有几家机构的预算。幸运的是，最近的…...

编程日记 2025/5/1 17:55:34

C++ 与多技术融合的深度实践：从 AI 到硬件的全栈协同

在数字化技术高速发展的今天，C 凭借其卓越的性能优势和底层控制能力，成为连接上层应用与底层硬件的核心纽带。这种独特定位使其在与 AI 深度学习、Python 生态及硬件加速技术的融合中展现出不可替代的价值，构建起从算法实现到硬件优化的全栈技…...

编程日记 2025/5/1 17:52:27

AdaBoost算法的原理及Python实现

一、概述 AdaBoost（Adaptive Boosting，自适应提升）是一种迭代式的集成学习算法，通过不断调整样本权重，提升弱学习器性能，最终集成为一个强学习器。它继承了 Boosting 的基本思想和关键机制，但在…...

编程日记 2025/5/1 17:52:26

无刷马达驱动芯片算法逐步革新着风扇灯行业--其利天下

风扇灯市场热度持续攀升，根据行业数据，风扇灯市场规模从2010年的100亿元增长至2019年的200亿元，年均复合增长率超10%，预计2025年将达30%，借此其利天下有限公司进一步提升了无刷风扇灯驱动方案。一、性能参数电压&a…...

编程日记 2025/5/1 17:51:25

数据库系统综合应用与深度实践指南

前言在当今数据驱动的时代，数据库技术已成为信息系统的核心支柱。从简单的数据存储到复杂的企业级应用，数据库系统支撑着现代社会的方方面面。本文作为一篇综合性的数据库科普文章，旨在为读者提供从基础到进阶的完整知识体系，涵…...

编程日记 2025/5/8 4:46:18

「Unity3D」TextMeshPro使用TMP_InputField实现，输入框高度自动扩展与收缩

先看实现效果： 要实现这个效果，有三个方面的问题需要解决： 第一，输入框的高度扩展，内部子元素会随着锚点，拉伸变形——要解决这个问题，需要将内部元素改变父类，然后增加父类高度&am…...

编程日记 2025/5/10 2:21:12

SAP-ABAP：在SAP系统中，COEP表（成本控制对象行项目表）详解

在SAP系统中，**COEP表（成本控制对象行项目表）**是成本控制（CO）模块的核心数据表之一，主要用于存储与成本核算相关的详细行项目数据。以下是对其作用的详细解析： 一、 COEP表的核心作用存储成本…...

编程日记 2025/5/1 17:39:56

crashpad 编译

一环境配置 1.1设置系统UTF8编码 1.2vs2017语言环境设置英文包二.获取depot_tools（此步骤可以跳过最新工具包已上传下载使用即可） windows下载压缩包，然后放到系统PATH中下载完以后，基本就是靠depot_tools这个工具集合了&am…...

编程日记 2025/5/3 6:27:02

Windows系统安装Docker（Win10系统升级，然后安装）

有时需要在自己笔记本跑下代码，所以安装Dockers，步骤如下： 1. 升级系统（Windows10专业版或者Windows11） Windows10家庭版装Docker较麻烦，所以我将Win10升级为Win11了（免费）&#x…...

编程日记 2025/5/1 17:32:37

【Fifty Project - D21】

今日完成记录 TimePlan完成情况9：00 - 10：00爬楼梯√12：00 - 14：00Leetcode√14：00 - 15：00《挪威的森林》√ Leetcode 每日一题今天的每日一题是个easy：给定一个数组，要求统计…...

编程日记 2025/5/2 23:12:24

中央网信办部署开展“清朗·整治AI技术滥用”专项行动

为规范AI服务和应用，促进行业健康有序发展，保障公民合法权益，近日，中央网信办印发通知，在全国范围内部署开展为期3个月的“清朗整治AI技术滥用”专项行动。中央网信办有关负责人表示，本次专项行动分两个阶…...

编程日记 2025/5/1 17:23:10

《Python实战进阶》 No46：CPython的GIL与多线程优化

Python实战进阶 No46：CPython的GIL与多线程优化摘要全局解释器锁（GIL）是CPython的核心机制，它保证了线程安全却限制了多核性能。本节通过concurrent.futures、C扩展优化和多进程架构，实战演示如何突破GIL限制&#…...

编程日记 2025/5/1 17:13:44

BOTA新六维力传感器PixONE：用12维度力矩与运动感测，驱动人形机器人力控未来

在机器人技术日益发展的今天，六维力传感器对于提升机器人感知环境、增强操作精度发挥着重要作用。瑞士BOTA Systems是一家专注于机器人传感器技术的公司，致力于为原始设备制造商提供高性能的传感器解决方案。 PixONE是BOTA推出的一款创新的高精度传感器&…...

编程日记 2025/5/1 17:08:31

《PyTorch documentation》（PyTorch 文档）

PyTorch documentation（PyTorch 文档） PyTorch is an optimized tensor library for deep learning using GPUs and CPUs. （PyTorch是一个优化的张量库，用于使用GPU和CPU进行深度学习。） Features described in this documentation are classified by release status: （此…...

编程日记 2025/5/1 17:08:29

数据库的死锁相关（一）

目录前言一、什么死锁二、产生死锁的必要条件三、死锁发生的具体位置和场景 1. 数据行级别死锁（最常见） 2. 表级别死锁 3. 索引间隙锁死锁（InnoDB特有） 4. 外键约束死锁 5. 元数据锁死锁 6. 内存中的锁结构死锁 7.…...

编程日记 2025/5/1 17:04:18

数据编码（Encoding）

对数据做编码可以减少存储和 I/O开销，常见的技术比如 Dictionary Encoding，Run-Length Encoding，Bitpacking，Delta Encoding，Frame-of-Reference等。本篇文章对这些编码方案进行介绍，举例说明，最后总结各种encoding的适用场景。一、Dictionary Encoding（字典编码）…...

编程日记 2025/5/1 17:03:14

Wartales 战争传说 [DLC 解锁] [Steam] [Windows SteamOS]

Wartales 战争传说 [DLC 解锁] [Steam] [Windows & SteamOS] DLC 版本至最新全部 DLC 后续可能无法及时更新文章，具体最新版本见下载文件说明 DLC 解锁列表（仅供参考） 《战争传说》 - Pirates of Belerion 《战争传说》 - The Tavern …...

编程日记 2025/5/1 17:02:12

决策树在电信客户流失分析中的实战应用

在当今数据驱动的时代，数据分析和机器学习技术在各行业的应用愈发广泛。电信行业面临着激烈的竞争，客户流失问题成为影响企业发展的关键因素之一。如何准确预测客户是否会流失，并采取相应措施挽留客户，是电信企业关注的重点。决策…...

编程日记 2025/5/1 17:01:10

滚珠丝杆怎么选型？

滚珠丝杆的选型需要考虑多个因素，包括应用需求、性能参数、环境因素等，以确保选型的准确性和合理性。 1、负载：确定设备运行时滚珠丝杆需要承受的静载荷和动载荷，包括轴向载荷和径向载荷，根据实际工作情况计算出最大负…...

编程日记 2025/5/1 17:01:09

HTN77A0原理图提供聚能芯半导体禾润一级代理技术支持免费送样

在电源管理需求日益严苛的当下，禾润 HTN77A0 以卓越性能脱颖而出。它不仅适配多种应用场景，还兼具高效节能与稳定输出，为设备供能带来革新体验。禾润 HTN77A0 同步降压变换器，凭借5V~130V 超宽输入电压范围，打破传统供…...

编程日记 2025/5/9 16:21:30

linux中sigint和sigterm的区别

SIGINT 和 SIGTERM 是在 Unix 及类 Unix 系统（包括 Linux）中用于进程间通信的信号，它们都可以用于请求进程终止，区别如下： 1、信号编号与定义在信号机制里，每个信号都有对应的编号，这便于系统…...

编程日记 2025/5/1 16:50:42

errorno 和WSAGetlasterror的区别

errno 和 WSAGetLastError 是用于获取错误代码的机制，但它们应用于不同的编程场景，下面为你详细介绍二者的区别： 应用场景 errno：它是 C 和 C 等编程语言里用于表示系统调用和库函数错误的全局变量。在 Unix、Linux 等类 Unix 系…...

编程日记 2025/5/1 16:47:34

《操作系统真象还原》第十一章——用户进程

文章目录前言为什么要有TSSTSS简介TSS描述符和TSS结构现代操作系统采用的任务切换方式定义并初始化TSS修改global.h编写tss.c测试实现用户进程实现用户进程的原理维护虚拟地址空间，修改thread.h为进程创建页表和3特权级栈，修改memory.c进入特权级3用户…...

编程日记 2025/5/1 16:42:21

第 11 届蓝桥杯 C++ 青少组中 / 高级组省赛 2020 年真题答和案解析

一、选择题第 1 题单选题题目：表达式 ‘6’ - ‘1’ 的值是 ( ) A. 整数 5 B. 字符 5 C. 表达式不合法 D. 字符 6 答案：A 解析：在 C++ 中，字符常量以 ASCII 码形式存储。6 的 ASCII 码为 54，1 的 ASCII 码为 49，二者相减结果为 5，是整数类型，因此选 A。第 2 题 …...

编程日记 2025/5/1 16:41:14

ES搜索知识

GET /categories/1/10?name手机 // 按名称过滤 GET /categories/1/10?type电子产品 // 按类型过滤 GET /categories/1/10?name手机&type电子产品 // 组合过滤查询参数 ApiOperation(value "获取商品分类分页列表")GetMapping("{page}/{limit}")…...

编程日记 2025/5/1 16:41:13

Java高阶程序员学习计划（详细到天，需有一定Java基础）

🤟致敬读者 🟩感谢阅读🟦笑口常开🟪生日快乐⬛早点睡觉📘博主相关 🟧博主信息🟨博客首页🟫专栏推荐🟥活动信息文章目录 Java高阶程序员学习计划（详细到天，需有一定Java基础）第一阶段（30天）Java基础：Java生态工具链：设计模式与编码规范：第二阶段（15天…...

编程日记 2025/5/1 16:40:10

SALOME源码分析: SMESH模块

本文分析SALOME GEOM模块。注1：限于研究水平，分析难免不当，欢迎批评指正。注2：文章内容会不定期更新。一、核心组件 1.1 SMESHGUI 二、关键流程网络资料 SALOME: Introduction to MESH Modulehttps://docs.salome-platform…...

编程日记 2025/5/1 16:37:03