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

前端（vue）学习笔记（CLASS 6）：路由进阶

news 来源：原创 2025/7/24 5:07:31

1、路由的封装抽离

将之前写在main.js文件中的路由配置与规则抽离出来，放置在router/index.js文件中，再将其导入回main.js文件中，即可实现路由的封装抽离

例如

//index.js
import { createMemoryHistory, createRouter } from 'vue-router'import HisPage from '../views/HisPage.vue'
import MyPage from '../views/MyPage.vue'const routes = [{ path: '/his', component: HisPage },{ path: '/my', component: MyPage },
]const router = createRouter({history: createMemoryHistory(),routes,
})export default router

在main.js内部引入

import router from './router/index.js'

同样在vue对象中进行注入即可

2、声明式导航-导航链接

Vue-router提供了一个全局组件router-link（取代a标签）

属性变成to，且无需#

1、能跳转，配置to属性指定路径（必须）。本质还是a标签，to无需#

2、能高亮，默认就会提供高亮类名，可以直接设置高亮样式

* 两个类名

说明：router-link自动给当前导航添加了两个高亮类名

1、router-link-active 模糊匹配（用的多）

to=“/my” 可以匹配 /my /my/a /my/b ...

2、router-link-exact-active 精确匹配

to="/my" 仅可以匹配 /my

说明：router-link的两个高亮类名太长了

在router的配置项中加上

linkActiveClass:"类名1"
linkExactActiveClass:"类名2"

可以通过配置项定制类名

* 跳转传参

在跳转路由时，进行传值

1、查询参数传参

语法格式如下

to="/path?参数名=值[&参数名=值]

对应页面组件接收传递过来的值

$route.query.参数名

2、动态路由传参

配置动态路由

router: [...,{path: '/.../:参数名',component: ...}
]

配置导航链接

to="/path/参数值"

对应页面组件接收传递过来的值

$route.params.参数名

注：/path/:参数名表示，必须要传参数。如果不传参数也希望匹配，可以加个可选符“?”

* vue路由-重定向

问题：网页打开，url默认是/路径，未匹配到组件时，会出现空白

说明：重定向 -> 匹配path后，强制跳转path路径

语法： {path: 匹配路径，redirect: 重定向的路径}

* vue路由-404

作用：当路径找不到匹配时，给个提示页面

位置：配在路由最后

语法：path：“*”（任意路径）-前面不匹配就命中最后这个

* vue路由-模式设置

问题：路由的路径看起来不自然，有#，能否切成真正路径形式

hash路由（默认）例如：http://localhost:8080/#/home

history路由（常用）例如：http://localhost:8080/home（以后上线需要服务器端支持）

const router = new VueRouter({routes,mode: "history"
})

3、编程式导航-基本跳转

问题：点击按钮跳转如何实现

编程式导航：用js代码来进行跳转

两种语法：

1、path路径跳转（简易方便）

this.$router.push('路由路径')this.$router.push({path:'路由路径'
})

2、name命令路由跳转(适合path路径长的场景）

this.$router.push({name: '路由名'
})

{name: '路由名', path: '/path', component: XXX}

* 编程式导航-路由传参

问题：点击搜索按钮时，跳转需要传参如何实现

1、path路径跳转传参（query传参）

this.$router.push('/路径?参数名1=参数值1&参数名2=参数值2)this.$router.push({path:'/路径',query: {参数名1: '参数值1',参数名2: '参数值2'}
})

并且使用$route.query.参数名进行获取

2、path路径跳转传参（动态路由传参）

this.$router.push('/路径/参数值')this.$router.push({path: '/路径/参数值'
})

3、name命名路由跳转传参（query传参）

this.$router.push({name:'路由名字',query: {参数名1: '参数值1',参数名2: '参数值2'}
})

4、name命名路由跳转传参（动态路由传参）

this.$router.push({name:'路由名字',params: {参数名1: '参数值1',参数名2: '参数值2'}
})

同样理由$route.params.参数名进行获取

前端（vue）学习笔记（CLASS 6）：路由进阶

1、路由的封装抽离将之前写在main.js文件中的路由配置与规则抽离出来，放置在router/index.js文件中，再将其导入回main.js文件中，即可实现路由的封装抽离例如 //index.js import { createMemoryHistory, createRouter } from vue-routerim…...

编程日记 2025/7/24 5:07:31

ubuntu 安装 Redis新版Redis 7.x

以下是在Ubuntu系统中安装Redis的详细指南， 一、官方APT源安装 sudo apt install redis-server -y 默认安装最新APT源版本（Ubuntu 22.04通常为Redis 6.x） 服务自动启动，配置文件路径：/etc/redis/redis.conf验证安装 …...

编程日记 2025/7/24 4:48:07

文章目录 1、HttpHelper.cs Framework4.812、HttpHelper.cs NET83、JsonHelper.cs Framework4.814、JsonHelper.cs NET85、uniapp request.js 访问WEBAPI 每次查找、测试都比较费事，记录一下把 1、HttpHelper.cs Framework4.81 using System; using System.IO; usi…...

编程日记 2025/7/24 5:01:36

【Linux】进程控制（进程创建、进程终止、进程等待、进程替换）

目录一、进程创建 1、fork函数 2、页表权限二、进程终止 1、main函数返回值（退出码） 2、常见错误码及其对应的错误描述： 将错误退出码转化为错误描述的方法： 3、进程退出的三种场景 4、由上我们可以知道： 5…...

编程日记 2025/7/24 4:58:09

java+selenium专题-＞启动浏览器下篇

1.简介上一篇文章，我们已经在搭建的java项目环境中实践了，今天就在基于maven项目的环境中演示一下。 2.eclipse中新建maven项目 1.依次点击eclipse的file - new - other ，如下图所示： 2.在搜索框输入关键字“maven”&#xff…...

编程日记 2025/7/24 5:05:12

sqlserver 循环删除1000行

在SQL Server中，如果你想循环删除1000行数据，有几种方法可以实现，但值得注意的是，频繁使用循环删除操作可能会对数据库性能造成影响，尤其是在处理大量数据时。下面介绍几种方法，并讨论它们的优缺点。方法…...

编程日记 2025/7/13 6:47:59

亚信电子与联发科技携手打造AIoT新未来

[台湾新竹讯, 2025年5月19日] 智能物联网（AIoT）融合人工智能与物联网技术，通过边缘AI的实时数据分析及设备智能联网能力，加速智能物联网创新应用的蓬勃发展。为满足AIoT产业对多网络端口的应用需求，全球半导体公司【联…...

编程日记 2025/7/15 14:11:38

【成品设计】基于STM32的人体健康监测系统

《基于STM32的人体健康监测系统》 Ps:有4个版本。 V1硬件设计： 主控：STM32F103C8T6：作为系统主控芯片。血氧心率传感器：用于采集当前心率、血氧值。温湿度传感器：用于采集当前环境温湿度。有源低电平触发蜂鸣器&…...

编程日记 2025/7/19 12:39:12

【MySQL进阶】了解linux操作系统下mysql的配置文件和常用选项

前言 🌟🌟本期讲解关于linux下mysql配置选项的详细介绍~~~ 🌈感兴趣的小伙伴看一看小编主页：GGBondlctrl-CSDN博客 🔥 你的点赞就是小编不断更新的最大动力 🎆那么…...

编程日记 2025/7/19 11:24:38

LeetCode 219.存在重复元素 II

目录题目： 题目描述： 题目链接： 思路： 核心思路： 思路详解： 代码： C代码： Java代码： 题目： 题目描述： 题目链接： 219. 存…...

编程日记 2025/7/22 20:39:34

解释：神经网络

在过去的10年里，表现最好的artificial-intelligence系统——比如智能手机上的语音识别器或谷歌最新的自动翻译——都是由一种叫做“深度学习”的技术产生的深度学习实际上是一种被称为神经网络的人工智能方法的新名称，这种方法已经流行了70多年。1944年…...

编程日记 2025/7/18 22:52:45

Java 泛型详解

在 Java 的类型系统中，泛型（Generics） 是一个非常重要的特性。它让我们能够编写更通用、更安全的代码，尤其是在处理集合类（如 List、Map 等）时，泛型的使用可以大大减少类型转换的麻烦&#xff0…...

编程日记 2025/7/24 3:27:37

React集成百度【JSAPI Three】教程（001）：快速入门

文章目录 1、快速入门1.1 创建react项目1.2 安装与配置1.3 静态资源配置1.4 配置百度地图AK1.5 第一个DEMO1、快速入门 JSAPI Three版本是一套基于Three.js的三维数字孪生版本地图服务引擎，一套引擎即可支持2D、2.5D、3D全能力的地理投影与数据源加载，帮助开发者轻松搞定平面…...

编程日记 2025/7/15 15:20:31

WPF中资源（Resource）与嵌入的资源（Embedded Resource)的区别及使用场景详解

🌟 开发WPF项目时图片、SVG、配置文件等到底该设置为哪种资源？如何正确读取、跨程序集访问？一篇文章全解答。在使用 WPF 进行项目开发时，很多开发者在设置文件“生成操作（Build Action）”时，常常会在“资源（Resource）”和“嵌入的资源（Embedded Resource）”之间感…...

编程日记 2025/7/23 19:07:52

如何在 Windows 11 或 10 上安装 Fliqlo 时钟屏保

了解如何在 Windows 11 或 10 上安装 Fliqlo，为您的 PC 或笔记本电脑屏幕添加一个翻转时钟屏保以显示时间。 Fliqlo 是一款适用于 Windows 和 macOS 平台的免费时钟屏保。它也适用于移动设备，但仅限于 iPhone 和 iPad。Fliqlo 的主要功能是在用户不活动时在 PC 或笔记本电脑…...

编程日记 2025/7/24 1:05:49

【STM32】ST-Link V2.1制作

一、下载烧写工具及程序下载器制作（ST-Link V2.1） 链接: 提取码：6666https://pan.baidu.com/s/1n0RYNDEw5mBT_CsTFoqrIg?pwd6666 二、安装STM32 CubeProgrammer 双击安装包，点击Next 继续点击Next 选择安装路径，再…...

编程日记 2025/7/23 1:21:29

day30python打卡

知识点回顾： 导入官方库的三种手段导入自定义库/模块的方式导入库/模块的核心逻辑：找到根目录（python解释器的目录和终端的目录不一致） 作业：自己新建几个不同路径文件尝试下如何导入一、导入官方库我们复盘下学习py…...

编程日记 2025/7/17 20:12:48

AI大语言模型评测体系演进与未来展望

随着人工智能技术的飞速发展，大语言模型（LLMs）已成为自然语言处理领域的核心研究方向。2025年最新行业报告显示，当前主流模型的评测体系已从单一任务评估转向多维度、全链路的能力剖析。例如，《全球首个大语言模型意识水平”识商”白盒DIKWP测评报告》通过数据、信息、知识…...

编程日记 2025/7/22 15:33:19

用Python将 PDF 中的表格提取为 Excel/CSV

*用Python将 PDF 中的表格提取为 Excel/CSV，*支持文本型 PDF 和扫描件/图片型 PDF（需 OCR 识别）。程序包含以下功能： 1.自动检测 PDF 类型（文本 or 扫描件） 2.提取表格数据并保存为 Excel/CSV 3.处理多页…...

编程日记 2025/7/21 2:26:54

【工具】ncdu工具安装与使用指南：高效管理Linux磁盘空间

磁盘空间管理是Linux系统维护中的关键任务。当系统提示"磁盘空间不足"时，快速找出占用大量空间的文件和目录变得尤为重要。虽然传统的du命令可以完成这项工作，但其输出往往难以阅读和分析。本文介绍的ncdu（NCurses Disk Usage&…...

编程日记 2025/7/22 10:51:15

50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | Progress Steps （步骤条）

📅 我们继续 50 个小项目挑战！—— Progress Steps 组件仓库地址：https://github.com/SunACong/50-vue-projects 项目预览地址：https://50-vue-projects.vercel.app/ ✨ 组件目标展示一个多步骤的进度条，指示当前所…...

编程日记 2025/7/17 21:41:49

数据分析—Excel数据清洗函数

在做数据分析的过程中，我们从数据库或者网页中获取的外部数据，通常是无法直接使用进行数据分析的。数据经常会有尾随的空格、奇奇怪怪的前缀和非打印字符等等问题，那么我们就需要先对数据进行清洗。下面介绍一些在数据清洗过程中常用的Excel函…...

编程日记 2025/7/21 12:04:22

CEF源码历史版本编译避坑指南

cef编译，网上查到的相关资料大多是官网上自动化编译的翻版，可能较新的版本按照那个步骤编译是没问题的。但是，对于历史版本的编译就会遇到各种坑。步骤大同小异，所以不再赘述，重点记录下针对历史版本编译要注意的点&am…...

编程日记 2025/7/21 18:20:17

看之前熟悉双亲委派加载机制，看之后了解双亲委派加载机制

今天面试被拷打双亲委派加载机制了，麻了。首先要介绍双亲委派加载机制，就需要先搞明白啥是Java的类加载机制。一.介绍 Java虚拟机（JVM）作为Java语言的核心运行环境，承担着将Java字节码转换为机器码并执行的重任。…...

编程日记 2025/7/22 6:40:52

std::ranges::views::stride 和 std::ranges::stride_view

std::ranges::views::stride 是 C23 中引入的一个范围适配器，用于创建一个视图，该视图只包含原始范围中每隔 N 个元素的元素（即步长为 N 的元素）。基本概念 std::ranges::stride_view 是一个范围适配器，接受一个输…...

编程日记 2025/7/4 8:28:01

IBM Spectrum Scale (GPFS) 日常运维命令大全

目录 1. 集群管理命令 1.1 集群启动与停止 1.2 节点管理 1.3 集群配置查看与修改 2. 文件系统管理 2.1 文件系统创建与删除 2.2 文件系统挂载与卸载 2.3 文件系统属性修改 3. 存储池与磁盘管理 3.1 存储池管理 3.2 物理磁盘管理 3.3 磁盘故障处理 4. 性能监控与调优…...

编程日记 2025/7/23 18:44:19

IDE 使用技巧与插件推荐

在现代软件开发中，集成开发环境（IDE）不仅是代码编辑器，更是提升开发效率和代码质量的强大平台。本文将从基础使用技巧、高级功能、插件生态、定制化配置及实战案例五大方面，帮助你全面掌握 IDE，提高编程体验…...

编程日记 2025/7/22 18:53:54

【MySQL】使用文件进行交互

目录准备工作 1.从文本文件中读取数据（导入） 1.1.CSV 文件 1.2.设置导入导出的路径 1.3.导入文件 1.4.将数据写入文本文件（导出） 2.从文件中读取并执行SQL命令 2.1.通过mysql监视器执行编写在文件里面的SQL语句 2.2.通过…...

编程日记 2025/7/23 21:26:21

Redis 学习笔记 5：分布式锁

Redis 学习笔记 5：分布式锁在前文中学习了如何基于 Redis 创建一个简单的分布式锁。虽然在大多数情况下这个锁已经可以满足需要，但其依然存在以下缺陷： 事实上一般而言，我们可以直接使用 Redisson 提供的分布式锁而非自己创建。…...

编程日记 2025/7/22 23:42:27

【硬核数学】2. AI如何“学习”？微积分揭秘模型优化的奥秘《从零构建机器学习、深度学习到LLM的数学认知》

在上一篇中，我们探索了线性代数如何帮助AI表示数据（向量、矩阵）和变换数据（矩阵乘法）。但AI的魅力远不止于此，它最核心的能力是“学习”——从数据中自动调整自身，以做出越来越准确的预测或决策…...

编程日记 2025/7/20 1:34:59

[Java][Leetcode middle] 151. 反转字符串中的单词

思路挺简单的自己想的，步骤挺复杂的先统计处开头和结尾的空格数跳过开头这些空格，将单词放到数组中统计最后一个可能漏过的单词（例如：“hello word”，没有空格退出）倒序输出 public String reverseWor…...

编程日记 2025/7/20 20:46:09

力扣每日一题5-18

class Solution { public int colorTheGrid(int m, int n) { // 每一列可能的状态总数每个单元有3可能 int totalState 1; for (int i 0; i < m; i) totalState * 3; // pre[k] 代表前一轮dp 状态为k 的方案总数 int [] pre new int [totalState]; // 初始化合法填色的…...

编程日记 2025/7/17 23:29:44

leetcode 74. Search a 2D Matrix

题目描述要求时间复杂度必须是log(m*n)。那么对每一行分别执行二分查找就不符合要求，这种做法的时间复杂度是m*log(n)。方法一，对每一行分别执行二分查找： class Solution { public:bool searchMatrix(vector<vector<int>>&a…...

编程日记 2025/7/23 3:56:48

养生指南：重塑健康生活的实用方案

一、饮食：均衡膳食，滋养身心三餐以 “轻盐、轻油、轻糖” 为准则。早餐搭配全麦三明治、无糖酸奶和一小把蓝莓，补充优质碳水与抗氧化物质；午餐选用糙米饭、白灼虾及蒜蓉西蓝花，保证蛋白质与膳食纤维摄入；…...

编程日记 2025/7/22 6:13:15

IPTABLES四表五链祥解

在Linux中，iptables 是一个强大的防火墙工具，用于管理和过滤网络流量。iptables 使用四个不同的表，每个表都包含多个链，来控制流量的处理。一、iptables四个表表名功能说明filter默认表，负责对进出数据包的过滤操作…...

编程日记 2025/7/22 22:37:14

嵌入式学习--江协51单片机day8

这个本来应该周末写的，可是一直想偷懒，只能是拖到周一了，今天把51结个尾，明天开始学32了。学习内容LCD1602，直流电机，AD/DA，红外遥控 LCD1602 内部的框架结构屏幕小于数据显示区&#xff…...

编程日记 2025/7/23 1:40:08

内网穿透与内网映射是什么？

在互联网技术快速迭代的当下，网络通信架构日益复杂，内网穿透与内网映射作为实现公网访问内网资源的核心技术，在企业办公、个人开发、智能家居等领域发挥着关键作用。尽管两者都致力于打通公网与内网的连接通道，但它们在底层原理、…...

编程日记 2025/7/21 14:45:12

51单片机点亮一个LED介绍

LED介绍 LED就是发光二极管，一般来说如果是直插式的，那就是长正短负，如果是贴片式的，那就带彩色标记是阴极，如果是三角形的，水平箭头指的就是阴极，通常一般的工作电压在3mA~20mA，当…...

编程日记 2025/7/22 8:35:43

WebRTC技术EasyRTC嵌入式音视频通信SDK助力智能电视搭建沉浸式实时音视频交互

一、方案概述 EasyRTC是一款基于WebRTC技术的开源实时音视频通信解决方案，具备低延迟、高画质、跨平台等优势。将EasyRTC功能应用于智能电视，能够为用户带来全新的交互体验，满足智能电视在家庭娱乐、远程教育、远程办公、远程医疗等多种场…...

编程日记 2025/7/19 1:08:43

uniapp 小程序 CSS 实现多行文本展开收起组件

效果组件 <template><div class"box" :style"boxStyle"><div ref"textRef" :class"[text-cont, btnFlag ? text-unfold : t…...

编程日记 2025/7/23 4:23:13

嵌入式51单片机：C51

sbit TISCON^1的意思是定义TI为SCON的次低位（最低位标记为0，其次为1，再次为2）...

编程日记 2025/7/17 1:24:57

【回眸】香橙派zero2 嵌入式数据库SQLite

前言 SQLite介绍安装SQLite3 SQLite 使用创建数据库创建一张表格插入数据查看数据库的记录删除一条记录更改一条记录删除一张表增加一列（性别） SQLite编程操作前言还有2个项目没更新完...披星戴月更新中... SQLite介绍基于嵌入…...

编程日记 2025/7/22 20:37:43

vue3个生命周期解析，及setup

合理使用各生命周期，切勿乱用，不是所有东西都需要，合理使用可以提高效率和性能。 Vue 3 生命周期钩子详解 Vue 3的生命周期钩子分为以下几个阶段： onBeforeMount 调用时机：在组件挂载到DOM之前调用。使用场景&#xf…...

编程日记 2025/7/23 22:29:36

MySQL死锁：面试通关“三部曲”心法

想象一下，你的MySQL数据库里有两张桌子（数据表），比如一张“产品库存表”，一张“订单表”。现在来了两个顾客（并发事务），都想同时操作这两张桌子上的东西： 顾客A 先锁住了…...

编程日记 2025/7/19 22:59:14

Spring Boot 与 RabbitMQ 的深度集成实践（四）

实战案例业务场景描述在电商系统中，用户下单是一个核心业务操作。当用户成功下单后，系统需要执行一系列后续任务，如发送邮件通知用户订单已成功提交，更新库存信息以确保商品库存的准确性，以及记录订单相关的日志信…...

编程日记 2025/7/20 19:28:38

ES6详解

一、变量声明 let 与 const 块级作用域：替代 var 的函数作用域 const 声明常量（不可重新赋值，但对象属性可修改） if (true) {let x 10const PI 3.14 } console.log(x) // 报错二、箭头函数简写语法与 this 绑定 // 传统函数…...

编程日记 2025/7/23 22:33:19

C语言—字符函数和字符串函数

1.字符分类函数字符控制函数：int iscntrl ( int c ); 控制字符通常不是可打印字符，该函数是用来判断参数是否为控制字符，需要的头文件为<ctype.h>标准ASCII码中，不可打印字符主要包括以下两类： 控制字符&…...

编程日记 2025/7/23 1:27:45

【LeetCode】大厂面试算法真题回忆(93)--优雅数组

题目描述如果一个数组中出现次数最多的元素出现大于等于k次，被称为k-优雅数组，k也可以被称为优雅阈值。例如，数组[1, 2, 3, 1, 2, 3, 1]，它是一个3-优雅数组，因为元素1出现次数大于等于3次。数组[1, 2, 3, 1, 2]就不是一个3-优雅数组，因为其中出现次数最多的元素是1和…...

编程日记 2025/7/23 17:46:44

【MySQL成神之路】MySQL常用语法总结

目录 MySQL 语法总结数据库操作表操作数据操作查询语句索引操作约束事务控制视图操作存储过程和函数触发器用户和权限管理数据库操作创建数据库： CREATE DATABASE database_name; 选择数据库： USE database_name; 删除数…...

编程日记 2025/7/16 1:33:59

机器学习第十六讲：K-means → 自动把超市顾客分成不同消费群体

机器学习第十六讲：K-means → 自动把超市顾客分成不同消费群体资料取自《零基础学机器学习》。查看总目录：学习大纲关于DeepSeek本地部署指南可以看下我之前写的文章：DeepSeek R1本地与线上满血版部署：超详细手把手指南 K-me…...

编程日记 2025/7/18 4:23:12