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

vue3:三项目增加404页面

news 来源：原创 2025/9/11 14:34:23

一、路由添加

1、官网地址

带参数的动态路由匹配 | Vue Routerhttps://router.vuejs.org/zh/guide/essentials/dynamic-matching.html

2、复制核心语句

{ path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound }

3、粘贴到路由index.js中

4、建立页面

在view文件夹中建立NotFoundView.vue文件夹

5、修改路由中404页面的路径

将404页面路路径指定刚才新建立的页面

二、编写404页面代码

1、页面效果

2、代码展示

①404页面编辑

NotFoundView.vue

<template><div class="page flex flex-center"><div class="content flex  flex-between"><div class="img flex flex-center"><img src="/public/img/404.png" alt="=" srcset=""></div><div class="title flex flex-center flex-column"><p>The page does not exist</p><div><router-link to="/"><el-button>返回主页</el-button></router-link></div></div></div></div>
</template><style>
.page {height: 100vh;background-color: #eaf0fe;
}.content {height: 400px;width: 800px;border-radius: 10px;
}.content .img {height: 100%;width: 45%;background-color: #abc4fc;border-top-left-radius: 10px;border-bottom-left-radius: 10px;
}.img img {width: 80%;height: 80%;
}.title {background-color: #fff;width: 55%;height: 100%;border-top-right-radius: 10px;border-bottom-right-radius: 10px;
}p {margin-bottom: 20px;font-size:20px;
}:root {--el-fill-color-blank: #f97ca7;--el-text-color-regular: #fff;--el-color-primary: #f97ca7;--el-color-primary-light-9: #fff;--el-color-primary-light-7: #f97ca7;--el-border-radius-base:20px;--el-font-size-base:12px;
}
</style>

注：

el按钮的样式编写

如上图的代码内容是改写的el-button自带的按钮效果

如上图：在浏览器页面中要查看按钮的相关样式，可打卡F12进行代码查看

例如：

--el-button-bg-color: var(--el-fill-color-blank);

这个表示，按钮的--el-button-bg-color属性的值是变量--el-fill-color-blank的值，可在base.css中定义或重写

在:root中进行编写变量信息即可

这里我不需要设置全部变量，我只是修改我页面的数据，那么我直接写在我的页面中即可

全局css其实是main.css，只是在内部引入了base.css才可使用

返回首页的按钮跳转功能

<router-link to="/">
<el-button>返回主页</el-button>
</router-link>

这里使用router-ink 进行跳转，to的值表示跳转到的页面位置

这里采用的 /，是主页面的路径表示

②main.css

在main.css中写入多页面都可能引入的常见样式，如下图

6、测试404页面是否建立成功

现在即可打开任意不存在的页面

vue3:三项目增加404页面

一、路由添加 1、官网地址带参数的动态路由匹配 | Vue Routerhttps://router.vuejs.org/zh/guide/essentials/dynamic-matching.html 2、复制核心语句 { path: /:pathMatch(.*)*, name: NotFound, component: NotFound } 3、粘贴到路由index.js中 4、建立页面在view文件夹…...

编程日记 2025/9/11 14:34:23

纯c#字体处理库（FontParser） -- 轻量、极速、跨平台、具有字体子集化功能

关于字体库与 FontParser 的开发历程　　字体库是用于处理和渲染字体的软件工具，其功能通常涵盖字体文件的加载、解析、字形渲染和文本布局等核心模块。在众多字体库中，FreeType 是被广泛应用且极具影响力的开源项目，已成为事实上的行业标准…...

编程日记 2025/9/6 19:47:50

云和恩墨亮相PolarDB开发者大会，与阿里云深化数据库服务合作

2025年2月26日，备受瞩目的阿里云PolarDB开发者大会于北京嘉瑞文化中心盛大举行，众多行业精英齐聚一堂，共襄技术盛会。云和恩墨作为阿里云重要的生态合作伙伴受邀参会。云和恩墨联合创始人兼技术研究院总经理杨廷琨与阿里云智能数据库产品事业…...

编程日记 2025/9/9 0:16:16

【通俗讲解电子电路】——从零开始理解生活中的电路(二)

电路分析：看懂简单的“电路图” ——从“路线图”到“工具箱”，掌握电路的底层逻辑 1. 欧姆定律：电的“交通规则” 公式解析：V I R 电压（V）：推动电流的动力（如电池电压&#xff…...

编程日记 2025/9/6 13:27:33

Spring DIIoC

一.IoC 1.简介什么是IoC？IoC，全称 Inversion of Control，控制反转。IoC是Spring的核心思想，Spring是⼀个“控制反转”的容器。如果我们需要一个对象，正常来说我们是通过new一个对象，这个时候我们依赖的…...

编程日记 2025/9/6 1:39:03

基于javaweb的SSM+Maven幼儿园管理系统设计和实现(源码+文档+部署讲解）

技术范围：SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等设计与开发。主要内容：免费功能设计、开题报告、任务书、中期检查PPT、系统功能实现、代码编写、论文编写和辅导、论…...

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

C++22——哈希

目录 1.unordered_map的文档介绍 2.unordered_set的文档介绍 3.底层结构 3.1哈希的概念 3.2哈希冲突 3.3哈希函数 3.4哈希冲突解决 3.4.1闭散列 3.4.2开散列 1.unordered_map的文档介绍 unordered_map在线文档说明 unordered_map是存储<key，value>键值…...

编程日记 2025/9/11 14:34:22

使用Spring Boot与达梦数据库(DM)进行多数据源配置及MyBatis Plus集成

使用Spring Boot与达梦数据库(DM)进行多数据源配置及MyBatis Plus集成在现代企业级应用开发中，处理多个数据源是一个常见的需求。本文将详细介绍如何使用Spring Boot结合达梦数据库（DM），并通过MyBatis Plus来简化数据库操作&…...

编程日记 2025/9/11 14:34:23

Servlet简介

Servlet是sun公司提供的一门用于开发动态web资源的技术。 Sun公司在其API中提供了一个servlet接口，用户若想用发一个动态web资源(即开发一个Java程序向浏览器输出数据)，需要完成以下2个步骤： 编写一个Java类，实现servlet接口。 …...

编程日记 2025/9/5 14:46:10

智能合约安全 | 合约无效化攻击

目录： 智能合约安全合约无效化攻击合约自毁函数 selfdestruct 攻击实现漏洞防御总结智能合约安全合约无效化攻击合约无效化攻击类同于web安全中的逻辑漏洞中的一种我们这里拿一个典型的例子来讲解有这样一份智能合约, 每个人可以向其中发送1 eth 第七个…...

编程日记 2025/9/11 14:34:23

20250226-代码笔记05-class CVRP_Decoder

文章目录前言一、class CVRP_Decoder(nn.Module):__init__(self, **model_params)函数功能函数代码二、class CVRP_Decoder(nn.Module):set_kv(self, encoded_nodes)函数功能函数代码三、class CVRP_Decoder(nn.Module):set_q1(self, encoded_q1)函数功能函数代码四、class…...

编程日记 2025/9/10 13:44:09

【开源免费】基于SpringBoot+Vue.JS网络海鲜市场系统（JAVA毕业设计）

本文项目编号 T 222 ，文末自助获取源码 \color{red}{T222，文末自助获取源码} T222，文末自助获取源码目录一、系统介绍二、数据库设计三、配套教程3.1 启动教程3.2 讲解视频3.3 二次开发教程四、功能截图五、文案资料5.1 选题背景5.2 国内…...

编程日记 2025/9/10 22:43:55

【LeetCode: SQL专题 : SQL132 每个题目和每份试卷被作答的人数和次数 + 合并查询】

🚀 算法题 🚀 🌲 算法刷题专栏 | 面试必备算法 | 面试高频算法 🍀 🌲 越难的东西,越要努力坚持，因为它具有很高的价值，算法就是这样✨ 🌲 作者简介：硕风和炜，…...

编程日记 2025/9/9 9:54:36

【软考-架构】1.2、指令系统-存储系统-cache

GitHub地址：https://github.com/tyronczt/system_architect ✨资料&文章更新✨ 指令系统计算机指令执行过程：取指令一一分析指令一一执行指令三个步骤，首先将程序计数器PC中的指令地址取出，送入地址总线，CPU依据…...

编程日记 2025/9/9 16:47:36

Uniapp开发微信小程序插件的一些心得

一、uniapp 开发微信小程序框架搭建 1. 通过 vue-cli 创建 uni-ap // nodejs使用18以上的版本 nvm use 18.14.1 // 安装vue-cli npm install -g vue/cli4 // 选择默认模版 vue create -p dcloudio/uni-preset-vue plugindemo // 运行 uniapp2wxpack-cli npx uniapp2wxpack --…...

编程日记 2025/9/11 14:33:05

C++-第十八章：线程相关内容

目录第一节：thread的主要内容 1-1.创建子线程 1-2.回收子线程 1-3.获得子线程的id 1-4.获得当前线程id 1-5.子线程传引用 1-6.线程的先创建后使用第二节：mutex的主要内容 2-1.mutex的作用 2-2.智能锁第三节：condition_variable的主要内…...

编程日记 2025/9/11 14:34:23

纯函数（Pure Function）概念

纯函数（Pure Function）概念纯函数是函数式编程中的核心概念，满足以下两个条件： 确定性：相同的输入永远得到相同的输出，不依赖外部状态或随机性。无副作用：不会修改外部变量、参数、I/O设备或…...

编程日记 2025/9/11 3:52:08

【网络安全】敏感字段扫描工具（可用于漏洞挖掘、代码审计）

原创文章，禁止转载。读者可对脚本进行二次创作，以适配个人需求。文章目录 ScanSensitiveInfo.py效果图ScanSensitiveInfo.py 该脚本用于扫描敏感字段、代码中可能引入的第三方JS链接/服务以及可能涉及信息泄露的请求方法。 1、脚本采用单线程处理，避免多线程导致的混行问…...

编程日记 2025/9/11 14:33:05

介绍下pdf打印工具类 JasperPrint

JasperPrint 工具类深度解析 JasperPrint 是 JasperReports 框架中实现 PDF 打印的核心载体类，其本质是填充数据后的可打印报表对象，承担着从模板编译、数据填充到格式输出的全流程控制。以下从 7 个维度展开深度解析： 一、核心定位与生命周…...

编程日记 2025/9/5 20:58:23

Deepseek Api Function Calling解析（tools、tool_calls）Deepseek函数调用流程图、Python代码示例

文章目录 Function Calling介绍**核心原理**1. **动态扩展模型能力**2. **JSON结构化交互** **实现步骤**（以支持Function Calling的模型为例）1. **定义可用函数**2. **模型匹配与生成**3. **开发者执行函数**4. **结果反馈给模型** **DeepSeek R1的当前…...

编程日记 2025/9/11 14:33:05

分享一套适合做课设的SpringBoot商城系统

开学季到了，不少同学都进入了学习的状态中去了，趁着今天有空来分享一套商城系统，这套代码实现了商城的前后台，整体界面和代码非常简洁，熟悉项目之后可以根据需求进行二次开发，也适合用来做毕设、课设&#…...

编程日记 2025/9/7 0:30:30

C语言自定义类型：联合和枚举

在C语言中，联合（Union）和枚举（Enum）是两种重要的的自定义数据类型。它们分别适用于不同的场景，能够提升代码的效率和可维护性。。本文将结合代码示例，详细讲解它们的声明、特点及使用方法。一、…...

编程日记 2025/9/8 6:24:39

Redis SCAN 命令详解：安全遍历海量键的利器

一、SCAN 命令的核心价值 Redis 的 KEYS * 命令虽然可以遍历所有键，但在生产环境中直接使用可能导致服务阻塞（时间复杂度 O(n)）。SCAN 命令通过游标分批次迭代，实现非阻塞式遍历，成为处理百万级键的安全选择。二、命…...

编程日记 2025/9/6 22:14:28

文字滚动效果组件和按钮组件

今天和大家分享一个vue中好用的组件，是我自己写的，大家也可以自己改，就是文字的循环滚动效果，如下图，文字会向左移动，结束之后也会有一个循环，还有一个按钮组件，基本框架写的差不多了…...

编程日记 2025/9/10 3:46:48

Sqlserver安全篇之_TLS的证书概念

证书的理解参考Sqlserver的官方文档https://learn.microsoft.com/zh-cn/sql/database-engine/configure-windows/certificate-overview?viewsql-server-ver16 TLS(Transport Layer Security)传输层安全和SSL(Secure Sockets Layer)安全套接字层协议位于应用程序协议层和TCP/…...

编程日记 2025/9/9 22:27:31

VS Code 如何搭建CC++开发环境

VS Code 如何搭建C/C开发环境文章目录 VS Code 如何搭建C/C开发环境1. VS Code是什么2. VS Code的下载和安装2.1 下载和安装2.2 环境的介绍 3. VS Code配置C/C开发环境3.1 下载和配置MinGW-w64编译器套件3.2 安装C/C插件3.3 重启VS Code 4. 在VS Code上编写C语言代码并编译成功…...

编程日记 2025/9/10 0:57:07

计算机网络之传输层（传输层的功能）

一、数据分段与重组传输层从会话层接收数据，并将其分割成较小的数据段，以适应网络层的最大传输单元（MTU）限制。在目的端，传输层负责将这些数据段重新组合成原始数据，确保数据的完整性和正确性。二、端口…...

编程日记 2025/9/10 20:10:31

中科大计算机网络原理 1.5 Internt结构和ISP

一、互联网的层次化架构 ‌覆盖范围分层‌ ‌主干网（Tier-1级）‌ 国家级或行业级核心网络，承担跨区域数据传输和全球互联功能。例如中国的四大主干网（ChinaNET、CERNET等）以及跨国运营商（如AT&T、Deuts…...

编程日记 2025/9/10 20:23:36

【网络安全 | 渗透工具】小程序反编译分析源码 | 图文教程

未经许可，禁止转载。本文仅供学习使用，严禁用于非法渗透测试，笔者不承担任何责任。文章目录 1、下载Proxifier2、下载反编译工具unveilr3、寻找小程序文件包4、对文件包进行反编译5、对源码进行分析6、渗透思路6.1、查找敏感信息泄露6.2、解析加解密逻辑6.3、枚举 API 接口…...

编程日记 2025/9/4 1:36:52

在鸿蒙HarmonyOS手机上安装hap应用

一、下载工具安装hap包需要用到小工具。二、解压到目录后，进入该文件夹，打开命令行，如下图三、将下载好的hap包放入刚才解压的文件夹内（假设hap包文件名为app.hap） 四、连接好手机和电脑，手机需要打…...

编程日记 2025/9/5 4:41:02

SQLAlchemy系列教程：SQLAlchemy快速入门示例项目

SQLAlchemy是与数据库交互的Python开发人员不可或缺的库。这个强大的ORM允许使用python结构进行简单的数据库操作。设置过程很简单，并且允许可扩展的数据库应用程序开发。本文通过入门项目完整介绍SQLAlchemy的应用过程，包括安装依赖包，创建连…...

编程日记 2025/9/7 9:45:37

【大模型系列篇】DeepSeek开源周，解锁AI黑科技

🔥 Day1：FlashMLA —— GPU推理加速器专为处理长短不一的AI推理请求而生，就像给Hopper GPU装上了智能导航，让数据在芯片上跑出3000GB/s的"磁悬浮"速度。✅ 已支持BF16格式｜580万亿次浮点运算/秒FlashMLA G…...

编程日记 2025/9/9 17:41:53

【Java 基础（人话版）】Java SE vs Java EE

Java SE vs Java EE：有什么区别？ 最近在学习 Java 的时候，总是会看到 Java SE 和 Java EE 这两个概念。刚开始有点迷糊，后来查了资料、做了一些实验，终于弄清楚了它们的区别。这里记录一下，希望对以后复习…...

编程日记 2025/9/7 23:11:56

Nmap使用指南

Nmap使用指南 Nmap (网络映射器) 是一款强大的应用网络扫描和安全核查工具，适合于网络管理和安全专家。本文将介绍Nmap的基本使用方法，包括基本命令和常用功能。 1. 基本使用方式 Nmap的基本命令格式如下： nmap [选项] 目标地址目标地址可…...

编程日记 2025/9/8 5:52:36

C#-委托

Action 无返回值，多线程常用 Action<string> action1 (name) > Console.WriteLine($"hello {name}"); action1("tom"); Func 有返回值，扩展方法常用，最后一个参数是输出参数 Func<int, int, double>…...

编程日记 2025/8/16 12:40:21

Qt中如果槽函数运行时间久，避免阻塞主线程的做法

Qt中如果槽函数运行时间久，避免阻塞主线程的做法一、解决步骤创建一个工作线程类：继承自QObject，并在其中实现槽函数的逻辑。将工作线程类的实例移动到单独的线程中：通过moveToThread()方法将对象移动到新线程。启动线程&…...

编程日记 2025/9/7 9:12:29

SQLark 数据迁移｜断点续迁已上线（Oracle-达梦）

数据迁移是 SQLark 最受企业和个人用户欢迎的功能之一，截止目前已帮助政府、金融、能源、通信等 50 家单位完成从 Oracle、MySQL 到达梦的全量迁移，自动化迁移成功率达 96% 以上。在 Oracle 到达梦数据库迁移过程中，SQLark V3.3 新增断点续…...

编程日记 2025/9/9 18:45:41

【学术会议论文投稿】Spring Boot实战：零基础打造你的Web应用新纪元

第七届人文教育与社会科学国际学术会议（ICHESS 2024）_艾思科蓝_学术一站式服务平台更多学术会议请看：https://ais.cn/u/nuyAF3 目录一、Spring Boot简介 1.1 Spring Boot的诞生背景 1.2 Spring Boot的核心特性二、搭建开发环境 2.1…...

编程日记 2025/9/7 11:20:41

【Multipath网络层协议】MPTCP工作原理

常见网络层多路径协议介绍 MPTCP（Multipath TCP） MPTCP 是在传统 TCP 基础上进行扩展的协议，它允许在源端和目的端之间建立多个 TCP子流，这些子流可以通过不同的网络路径传输数据。例如，一台笔记本电脑同时连接了 W…...

编程日记 2025/9/9 0:31:45

【网络安全】从NA到P1，我是如何扩大思路的？

未经许可，不得转载。本文涉及漏洞均已修复。文章目录正文正文在这篇文章中，我将向大家展示一个我发现的漏洞，该漏洞利用了一个硬编码的 Basic 认证头，获取了管理员权限。首先，假设公司域名为“target.com”。第一步是使用多种工具（如 Amass、subfinder、findoma…...

编程日记 2025/9/11 3:15:03

使用 Postman 访问 Keycloak 端点

1. 引言在本教程中，我们将首先快速回顾 OAuth 2.0、OpenID 和 Keycloak。然后，我们将了解 Keycloak REST API 以及如何在 Postman 中调用它们。 2. OAuth 2.0 OAuth 2.0 是一个授权框架，它允许经过身份验证的用户通过令牌向第三方授予访问…...

编程日记 2025/9/10 11:44:12

[AI机器人] Web-AI-Robot机器人前瞻版--比奇堡海之霸凯伦

文章目录简述开源Web-AI-Robot 项目-比奇堡-海之霸-凯伦技术架构效果预览简述本项目配合前端项目bikini_bottom_karen_ui运行，来源于柒杉工作室（截止2025.2，目前我自己）。打造一个只需要在浏览器上运行的AI智能机器人&#…...

编程日记 2025/9/5 13:27:57

FastAPI 学习笔记

简介： FastAPI 是一个用于构建 API 的现代、快速（高性能）的 web 框架，使用 Python 并基于标准的 Python 类型提示。关键特性: 快速：可与 NodeJS 和 Go 并肩的极高性能（归功于 Starlette 和 Pydantic&…...

编程日记 2025/9/9 2:57:49

CineMaster: 用于电影文本到视频生成的 3D 感知且可控的框架。

CineMaster是一种 3D 感知且可控的文本到视频生成方法允许用户在 3D 空间中联合操纵物体和相机，以创作高质量的电影视频。相关链接论文：cinemaster-dev.github.io 论文介绍 CineMaster是一种用于 3D 感知和可控文本到视频生成的新型框架。目标是让用…...

编程日记 2025/9/7 20:05:33

Linux上用C++和GCC开发程序实现两个不同PostgreSQL实例下单个数据库中多个Schema稳定高效的数据迁移到其它PostgreSQL实例

设计一个在Linux上运行的GCC C程序，同时连接三个不同的PostgreSQL实例，其中两个实例中分别有两个数据库中多个Schema的表结构分别与第三实例中两个数据库中多个Schema个结构完全相同，同时复制两个实例中两个数据库中多个Schema里的所有表的数…...

编程日记 2025/9/8 12:22:09

【Qt】ffmpeg照片提取、视频播放▲

目录一、图像的成像原理： RGB成像原理： YUV成像原理： 二、多线程三、ffmpeg解码（照片提取） 1.准备工作 （1）在工程文件夹里面新建三个文件夹 （2）在main函数中加…...

编程日记 2025/9/10 7:25:26

大语言模型中的 Token：它们是什么，如何工作？

引言如果你使用过 ChatGPT 这样的 AI 工具，你可能会好奇：它是如何理解并生成文字的？大语言模型（LLM，Large Language Model）并不是直接处理整个句子或文章，而是拆分成一个个 Token（…...

编程日记 2025/9/10 9:11:58

如何评估所选择的PHP后端框架的性能？

大家在选择PHP后端框架的时候，如果想评估其性能如何，能不能扛得住你的项目？可以根据以下几点进行分析，帮助大家选择到更符合自己心目中的PHP后端框架。 1. 基准测试基准测试是评估框架性能的基础方法，主要通过模拟高…...

编程日记 2025/9/7 18:56:06

从UNIX到Linux：操作系统进化史与开源革命

从UNIX到Linux：操作系统进化史与开源革命一、操作系统：数字世界的基石 1.1 什么是操作系统？ 操作系统（OS）是计算机系统的核心管理者，承担着三大核心使命： 硬件指挥官：直接管理C…...

编程日记 2025/9/2 23:44:28

神经网络 - 激活函数（Sigmoid 型函数）

激活函数在神经元中非常重要的。为了增强网络的表示能力和学习能力，激活函数需要具备以下几点性质: (1) 连续并可导(允许少数点上不可导)的非线性函数。可导的激活函数可以直接利用数值优化的方法来学习网络参数. (2) 激活函数及其导函数要尽可能的简单&#xff0…...

编程日记 2025/9/10 5:31:07

一、路由添加

1、官网地址

2、复制核心语句

3、粘贴到路由index.js中

4、建立页面

5、修改路由中404页面的路径

二、编写404页面代码

1、页面效果

2、代码展示

①404页面编辑

②main.css

6、测试404页面是否建立成功

相关文章：