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

十二、Vue 路由

news 2026/4/1 19:43:17

文章目录

  • 一、简介
  • 二、安装与基本配置
    • 安装 Vue Router
    • 创建路由实例
    • 在应用中使用路由实例
  • 三、路由组件与视图
    • 路由组件的定义与使用
  • 四、动态路由
    • 动态路由参数的定义与获取
    • 动态路由的应用场景
  • 五、嵌套路由
    • 嵌套路由的概念与配置
    • 嵌套路由的应用场景
  • 六、路由导航
    • <router - link> 标签的使用
    • 编程式导航
    • 导航守卫
  • 七、路由的高级特性
    • 路由懒加载
    • 路由元信息（meta）
    • 滚动行为
  • 八、错误处理与重定向
    • 路由错误处理（404 页面）
    • 路由重定向
  • 九、与 Vuex 的结合
    • 在路由导航中使用 Vuex 存储状态
    • 根据 Vuex 状态动态更新路由配置（高级用法）
  • 十、测试路由
    • 单元测试路由组件
    • 测试路由导航
  • 十一、跨模块路由管理与优化
    • 模块化路由配置
    • 性能优化策略回顾与整合

在这里插入图片描述

一、简介

  在 Vue3 应用程序中，路由（Vue Router）用于实现单页面应用（SPA）的页面导航。它允许用户在不刷新整个页面的情况下，在不同的视图组件之间进行切换，提供了流畅的用户体验。通过管理 URL 和对应的组件，路由系统能够根据用户的操作（如点击链接），动态地加载和显示相应的组件内容。

二、安装与基本配置

安装 Vue Router

  首先，需要通过 npm 或者 yarn 安装 Vue Router。如果使用 npm，可以在项目目录下的终端中运行npm install vue - router@4（这里以 Vue Router 4 为例，它适用于 Vue3）。

创建路由实例

  在项目的src目录下，创建一个router.js（文件名可以自定义）文件。在这个文件中，引入createRouter和createWebHisto

相关文章：

十二、Vue 路由

文章目录 一、简介二、安装与基本配置安装 Vue Router创建路由实例在应用中使用路由实例三、路由组件与视图路由组件的定义与使用四、动态路由动态路由参数的定义与获取动态路由的应用场景五、嵌套路由嵌套路由的概念与配置嵌套路由的应用场景六、路由导航<router - link>…...

编程日记 2025/1/4 6:48:18

smell---Paddle-DI

跨模态文档智能大模型–Ernie-Layout 目标&#xff1a;提取文档中无结构或半结构化的知识 github项目地址 Paddle NLP ERNIE-Layout基于Transformer Encode架构&#xff0c;并提出以下trick&#xff1a; 1、OCR工具提取信息 借助OCR工具提取图片中的文字及文字对应的坐标信息…...

编程日记 2025/1/4 6:42:11

PCL点云库入门——PCL库点云特征之点云法向量（NormalEstimation）及其可视化

1、PCL点云库中点云特征综述 1.1、点云特征综述 点云特征描述在三维数据处理领域扮演着至关重要的角色&#xff0c;它直接决定了后续的识别、分类以及重建等关键任务的执行效果。在众多的特征描述方法中&#xff0c;我们可以看到基于几何形状的特征、基于统计信息的特征以及…...

编程日记 2025/1/4 6:37:06

25.Java JUC 引入（进程与线程、线程的状态、并发与并行、管程、用户线程与守护线程）

一、JUC 简介 JUC 是 java.util.concurrent 工具包的简称&#xff0c;这是一个处理线程的工具包&#xff0c;从 JDK1.5 开始出现 二、进程与线程 1、基本介绍 &#xff08;1&#xff09;进程 进程是计算机中的程序关于某数据集合上的一次运行活动&#xff0c;是系统进行资源…...

编程日记 2025/1/4 6:35:04

Linux 异步 I/O 框架 io_uring：基本原理、程序示例与性能压测

大家觉得有意义和帮助记得关注和点赞&#xff01;&#xff01;&#xff01; io_uring 是 2019 年 Linux 5.1 内核首次引入的高性能 异步 I/O 框架&#xff0c;能显著加速 I/O 密集型应用的性能。 但如果你的应用已经在使用 传统 Linux AIO 了&#xff0c;并且使用方式恰当&…...

编程日记 2025/1/4 6:33:01

Uniapp中使用`wxml-to-canvas`开发DOM生成图片功能

Uniapp中使用wxml-to-canvas开发DOM生成图片功能 在移动端开发中&#xff0c;生成图片是一个常见需求&#xff0c;例如用于分享海报、生成动态二维码等。在Uniapp框架中&#xff0c;我们可以通过wxml-to-canvas插件轻松实现将DOM转化为图片的功能。本文将详细介绍如何在Uniapp…...

编程日记 2025/1/4 6:30:59

Linux之ARM(MX6U)裸机篇----5.仿stm32的LED驱动实验

一&#xff0c;启动文件 .global _start .global _bss_start /* 类似宏定义把__bss_start定义为_bss_start */ _bss_start:.word __bss_start.global _bss_end _bss_end:.word __bss_end_start:#设置处理器进入SVC模式mrs r0, cpsr /* 读取cpsr到r0 */bic r0, r0, …...

编程日记 2025/1/4 6:29:58

DVWA靶场Open HTTP Redirect (重定向) 漏洞所有级别通关教程及源码审计

目录标题 Open HTTP Redirectlow源码审计 medium源码审计 high源码审计 impossible源码审计 Open HTTP Redirect HTTP 重定向&#xff08;HTTP Redirect Attack&#xff09;是一种网络&#xff0c;利用 HTTP 协议中的重定向机制&#xff0c;将用户引导至恶意网站或非法页面&am…...

编程日记 2025/1/4 6:28:57

探索 JMeter While Controller：循环测试的奇妙世界

嘿&#xff0c;宝子们&#xff01;今天咱们就来聊聊 JMeter 里超级厉害的 While 控制器&#xff0c;它就像是一把神奇的钥匙&#xff0c;能帮我们打开循环测试的大门&#xff0c;模拟出各种各样复杂又有趣的场景哦&#xff01; 一、While 控制器初印象 想象一下&#xff0c;你…...

编程日记 2025/1/4 6:25:54

Flutter踩坑记-第三方SDK不兼容Gradle 8.0，需适配namespace

最近需要集成Flutter作为Module&#xff0c;Flutter依赖了第三方库&#xff0c;Gradle是8.0版本。 编译报错&#xff1a; 解决办法是在.android根目录下的build.gradle下新增一行代码&#xff1a; buildscript {ext.kotlin_version "1.8.22"repositories {google()…...

编程日记 2025/1/4 6:24:53

ubuntu支持ssh

Ubuntu 默认是支持 SSH 的&#xff0c;但通常并不会在安装时启用 SSH 服务。为了能够远程连接到 Ubuntu 系统&#xff0c;需要安装并启动 SSH 服务器&#xff08;即 OpenSSH&#xff09;。以下是如何在 Ubuntu 系统中启用和配置 SSH 服务的步骤&#xff1a; 检查 SSH 是否已安…...

编程日记 2025/1/4 6:18:46

浏览器书签智能分类

浏览器书签智能分类工具 最近发现浏览器的书签越来越乱了&#xff0c;主要是因为自己太懒&#xff0c;其次之前建的分类太多又乱&#xff0c;重新手动整理确实比较烦。因此有了这个小项目。借助智谱AI的力量对书签进行重新分类。 项目简介 本工具用于自动整理浏览器书签&…...

编程日记 2025/1/4 6:15:43

通俗易懂的讲一下Vue的双向绑定和React的单向绑定

1.Vue 的双向绑定&#xff1a; <template><!-- 输入框和数据自动绑定&#xff0c;就像连体婴儿&#xff0c;一个动另一个也动 --><input v-model"message"><p>{{ message }}</p><!-- 完整表单示例 --><form><!-- 所有…...

编程日记 2025/1/4 6:12:39

Redis 深度解析：从入门到精通

引言 Redis 是一个开源的、高性能的键值存储系统&#xff0c;它支持多种数据结构&#xff0c;并且提供了丰富的功能和接口。作为内存数据库&#xff0c;Redis 以其快速的数据访问速度、灵活的数据模型以及持久化选项而闻名。本文将详细介绍 Redis 的核心概念、工作原理及其应用…...

编程日记 2025/1/4 6:11:38

基于物联网的冻保鲜运输智能控制系统

基于物联网的冻保鲜运输智能控制系统设计文档 1. 项目开发背景 随着全球化贸易的发展&#xff0c;冷链物流在现代运输行业中扮演着日益重要的角色。尤其是冻品、食品、药品等对运输环境有着严格要求的货物&#xff0c;其运输过程中温度、湿度等环境参数必须严格控制&#xff…...

编程日记 2025/1/4 6:10:36

【深度学习基础之多尺度特征提取】多尺度卷积神经网络（MS-CNN）是如何在深度学习网络中提取多尺度特征的？附代码（二）

【深度学习基础之多尺度特征提取】多尺度卷积神经网络&#xff08;MS-CNN&#xff09;是如何在深度学习网络中提取多尺度特征的&#xff1f;附代码&#xff08;二&#xff09; 【深度学习基础之多尺度特征提取】多尺度卷积神经网络&#xff08;MS-CNN&#xff09;是如何在深度…...

编程日记 2025/1/4 6:09:36

论文解读之learning to summarize with human feedback

最近在看大模型训练相关的论文&#xff0c;预计会追溯经典的和最新的训练策略以及微调原理等 本次解读经典论文learning to summarize with human feedback 一、简介 部分生成任务需要对齐人类偏好&#xff0c;但是根据最大化可能性&#xff08;对数似然&#xff09;进行微调…...

编程日记 2025/1/4 6:08:35

STM32学习（六 ）

串口初始化IO引脚 串口的引脚在哪里 串口可以利用GPIO_InitTypeDef结构体和GPIO_Init&#xff08;&#xff09;函数进行初始化 USART_InitTypeDef USART_InitStruct;//建立串口结构体USART_InitStruct.USART_BaudRate 115200;//波特率115200USART_InitStruct.USART_Mode US…...

编程日记 2025/1/4 6:06:29

基于 GitHub API 的 Issue 和 PR 自动化解决方案

文章目录 摘要引言优化 Issue 和 PR 管理的方法工具选择流程优化 自动化 Issue 和 PR 管理代码逻辑详解获取 Issue 数据为 Issue 添加标签将 Issue 分配给开发者主逻辑 实际运行效果进一步扩展QA 环节总结参考资料 摘要 在开源项目中&#xff0c;Issue 和 Pull Request&#x…...

编程日记 2025/1/4 6:01:21

56.在 Vue 3 中使用 OpenLayers 通过 moveend 事件获取地图左上和右下的坐标信息

前言 在现代 Web 开发中&#xff0c;地图应用越来越成为重要的组成部分。OpenLayers 是一个功能强大的 JavaScript 地图库&#xff0c;它提供了丰富的地图交互和操作功能&#xff0c;而 Vue 3 是当前流行的前端框架之一。在本篇文章中&#xff0c;我们将介绍如何在 Vue 3 中集…...

编程日记 2025/1/4 5:58:18

卡尔曼滤波调参实战：如何用MATLAB让MPU6050的加速度数据更‘听话’？

卡尔曼滤波调参实战&#xff1a;如何用MATLAB让MPU6050的加速度数据更‘听话’&#xff1f; 当你在MATLAB中第一次看到MPU6050的原始加速度数据时&#xff0c;那些疯狂跳动的曲线可能会让你怀疑人生。别担心&#xff0c;这不是传感器坏了&#xff0c;而是现实世界本就充满噪声…...

编程新知 2026/4/1 19:37:12

Phi-4-mini-reasoning效果展示：含单位换算、科学计数法的复合型数学题求解

Phi-4-mini-reasoning效果展示&#xff1a;含单位换算、科学计数法的复合型数学题求解 1. 模型能力概览 Phi-4-mini-reasoning是一款专注于推理任务的文本生成模型&#xff0c;特别擅长处理需要多步逻辑推导的问题。与通用聊天模型不同&#xff0c;它更专注于"问题输入→…...

编程新知 2026/4/1 18:14:46

突破试用限制：开源脚本实现IDM无限使用的完整解决方案

突破试用限制&#xff1a;开源脚本实现IDM无限使用的完整解决方案 【免费下载链接】IDM-Activation-Script IDM Activation & Trail Reset Script 项目地址: https://gitcode.com/gh_mirrors/id/IDM-Activation-Script 一、问题引入&#xff1a;IDM用户的痛点与解决…...

编程新知 2026/4/1 17:39:24

存储系统的容量规划与管理：从预测到优化

存储系统的容量规划与管理&#xff1a;从预测到优化 背景 作为一个专注于存储架构的技术人&#xff0c;我深知容量规划与管理对存储系统的重要性。最近团队在管理存储系统时&#xff0c;遇到了容量不足、资源浪费等问题。为了帮助团队更好地理解和实践存储系统的容量规划与管理…...

编程新知 2026/4/1 16:10:38

08_Claude Code之高级工作流与自动化：循环、调度与并行批处理

08 Claude Code之高级工作流与自动化&#xff1a;循环、调度与并行批处理 Claude Code 的真正价值在于自动化能力&#xff0c;而不仅仅是对话工具。本文深度讲解 Plan Mode 的量化对比&#xff08;多文件重构成功率从62%到89%&#xff09;、非交互批处理脚本、并行处理架构、CI…...

编程新知 2026/4/1 15:56:30

Flow.js源码深度解析：分块算法、上传策略与事件系统的实现原理

Flow.js源码深度解析&#xff1a;分块算法、上传策略与事件系统的实现原理 【免费下载链接】flow.js A JavaScript library providing multiple simultaneous, stable, fault-tolerant and resumable/restartable file uploads via the HTML5 File API. 项目地址: https://gi…...

编程新知 2026/4/1 15:46:25

LoRA训练助手GPU显存优化：Qwen3-32B INT4量化后仅需9.2GB显存稳定运行

LoRA训练助手GPU显存优化&#xff1a;Qwen3-32B INT4量化后仅需9.2GB显存稳定运行 1. 引言&#xff1a;当大模型遇见显存焦虑 如果你尝试过在个人电脑上运行大语言模型&#xff0c;大概率会遇到一个令人头疼的问题&#xff1a;显存不足。特别是像Qwen3-32B这样拥有320亿参数的…...

编程新知 2026/4/1 14:26:27

电商客服外包怎么选｜避坑指南[特殊字符]2026 商家必看

做电商绕不开客服外包&#xff0c;但低价陷阱、转包兼职、大促掉链、响应超时、售后甩锅真的太坑了&#xff01;今天整理一套不踩雷选型攻略&#xff0c;全是行业干货&#xff0c;新手也能直接抄作业&#x1f447; &#x1f6ab;先避坑&#xff1a;这些雷区千万别碰 超低价诱惑…...

编程新知 2026/4/1 14:22:08

零基础入门AI集成：在快马平台编写你的第一个豆包AI对话程序

零基础入门AI集成&#xff1a;在快马平台编写你的第一个豆包AI对话程序 作为一个刚接触AI开发的新手&#xff0c;第一次看到豆包开放平台的API文档时&#xff0c;我完全被各种参数和术语搞晕了。好在发现了InsCode(快马)平台&#xff0c;它让我不用从零开始写代码就能理解整个…...

编程新知 2026/4/1 14:22:08

MoveIt2新手必看：如何正确选择安装分支（main vs. tutorials）及使用vcs管理多仓库

MoveIt2分支选择与多仓库管理实战指南 当你在ROS2生态中开始使用MoveIt2时&#xff0c;第一个拦路虎往往不是算法理解或代码编写&#xff0c;而是如何正确搭建开发环境。MoveIt2作为由数十个独立Git仓库组成的复杂项目&#xff0c;其分支管理和版本协同问题困扰着许多中级开发者…...

编程新知 2026/4/1 14:03:45