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

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文件夹中建立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文件夹…...

MCAL(Microcontroller Abstraction Layer)介绍

目录 MCAL的核心作用 MCAL的模块组成 1. 微控制器驱动&#xff08;Microcontroller Drivers&#xff09; 2. I/O驱动&#xff08;DIO, PWM, ADC等&#xff09; 3. 通信驱动&#xff08;Communication Drivers&#xff09; 4. 存储驱动&#xff08;Memory Drivers&#xf…...

爬虫:PhantomJS的详细使用和实战案例

文章目录 一、PhantomJS介绍1.1 什么是 PhantomJS1.2 PhantomJS 的特点与优势二、PhantomJS 的安装2.1 在 macOS 上安装 PhantomJS2.2 在 Linux 上安装 PhantomJS2.3 在 Windows 上安装 PhantomJS2.4 验证安装三、PhantomJS 的基本使用3.1 示例 1:打开网页并截图3.2 示例 2:获…...

目标检测——数据处理

1. Mosaic 数据增强 Mosaic 数据增强步骤: (1). 选择四个图像&#xff1a; 从数据集中随机选择四张图像。这四张图像是用来组合成一个新图像的基础。 (2) 确定拼接位置&#xff1a; 设计一个新的画布(输入size的2倍)&#xff0c;在指定范围内找出一个随机点&#xff08;如…...

深度学习工程师的技术图谱和学习路径

在构建一个深度学习工程师的技术图谱时,按照“技能树与能力模型”的结构可以帮助清晰地展示出技术体系的层次化关系,帮助学习者更好地理解每个技术点的依赖与顺序。 深度学习工程师的技术图谱和学习路径 以下是深度学习工程师的技能树,包括从基础到进阶的学习路径,以及对…...

Qt 文件操作+多线程+网络

文章目录 1. 文件操作1.1 API1.2 例子1&#xff0c;简单记事本1.3 例子2&#xff0c;输出文件的属性 2. Qt 多线程2.1 常用API2.2 例子1&#xff0c;自定义定时器 3. 线程安全3.1 互斥锁3.2 条件变量 4. 网络编程4.1 UDP Socket4.2 UDP Server4.3 UDP Client4.4 TCP Socket4.5 …...

如何使用ArcGIS Pro制作横向图例:详细步骤与实践指南

ArcGIS Pro&#xff0c;作为Esri公司推出的新一代地理信息系统&#xff08;GIS&#xff09;平台&#xff0c;以其强大的功能和灵活的操作界面&#xff0c;在地理数据处理、地图制作和空间分析等领域发挥着重要作用。 在地图制作过程中&#xff0c;图例作为地图的重要组成部分&…...

Kotlin 嵌套类和内部类

在Kotlin中&#xff0c;嵌套类&#xff08;Nested Class&#xff09;和内部类&#xff08;Inner Class&#xff09;是两种不同的类&#xff0c;它们在定义和使用上有一些区别。 1.嵌套类&#xff08;Nested Classes&#xff09;默认是静态的&#xff08;即等同于Java中的stati…...

蓝蝶(BlueStacks)模拟器Root、Magisk、LSPosed及Shamiko框架安装与过应用检测指南

蓝蝶&#xff08;BlueStacks&#xff09;模拟器Root、Magisk、LSPosed及Shamiko框架安装与过应用检测指南 蓝蝶bluestacks模拟器root和magisk以及Lsposed和shamiko框架的安装过应用检测 一、引言 蓝蝶&#xff08;BlueStacks&#xff09;模拟器是一款广受欢迎的安卓模拟器&…...

OpenCV计算摄影学(6)高动态范围成像(HDR imaging)

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 高动态范围成像&#xff08;HDR imaging&#xff09;是一种图像处理技术&#xff0c;旨在通过增加图像的动态范围来更准确地表示真实世界的亮度差…...

[ComfyUI][AI生图]如何在Comfyui中安装插件管理器

如何在ComfyUI便携版中安装插件管理器 在现代软件环境中,图形用户界面(GUI)提供了一种直观的方式来与应用程序交互。ComfyUI是一个出色的GUI框架,它使用户能够通过图形化方式配置和管理他们的应用程序。特别是ComfyUI的便携版,它允许用户在没有安装的情况下使用这一工具,…...

初探Ollama与deepseek

什么是Ollama&#xff1f;它与大模型有什么联系&#xff1f; 简单说&#xff0c;Ollama就像是你电脑上的一个 “大模型小助手”。 以前&#xff0c;很多强大的大语言模型&#xff0c;比如能回答各种问题、写文章、翻译等的那些模型&#xff0c;要么只能在网上的服务器上用&am…...

Linux top 常用参数记录

top命令经常用来监控linux的系统状况&#xff0c;能实时显示系统中各个进程、线程的资源占用情况&#xff0c;是常用的性能分析工具。 一些常用参数记录 top的使用方式 top [-d number] | top [-bnp] # 5s 更新一次 top -d 5# 进行2次top命令的输出结果 top -n 2# 查看进程的…...

CCF-CSP认证 202104-1灰度直方图

题目描述 思路 首先输入矩阵长度、矩阵宽度和灰度范围&#xff0c;结果数组长度可固定&#xff0c;其中的元素要初始化为0。在输入灰度值的时候&#xff0c;结果数组中以该灰度值为索引的元素值1&#xff0c;即可统计每个灰度值的数量。 代码 C版&#xff1a; #include <…...

怎么下载安装yarn

安装 npm install --global yarn 是否安装成功 yarn -v Yarn 淘宝源安装&#xff0c;分别复制粘贴以下代码行到黑窗口运行即可 yarn config set registry https://registry.npm.taobao.org -g yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/…...

Vulhub靶机 AppWeb认证绕过漏洞(CVE-2018-8715)(渗透测试详解)

一、开启vulhub环境 docker-compose up -d 启动docker ps 查看开放的端口 影响版本 Appweb 7.0.2以及之前的版本 二、访问靶机IP 8080端口 访问IP会弹出个登录框 1、随便输个用户名&#xff0c;利用burp抓包 2、修改数据包 &#xff0c;发包 Authorization: Digest usern…...

CSS 系列之:grid 布局

基本概念 <template><div class"parent"><div class"box">p1-1</div><div class"box">p1-2</div><div class"box">p1-3</div></div><div class"parent"><…...

DeepSeek MLA(Multi-Head Latent Attention)算法浅析

目录 前言1. 从MHA、MQA、GQA到MLA1.1 MHA1.2 瓶颈1.3 MQA1.4 GQA1.5 MLA1.5.1 Part 11.5.2 Part 21.5.3 Part 3 结语参考 前言 学习 DeepSeek 中的 MLA 模块&#xff0c;究极缝合怪&#xff0c;东抄抄西抄抄&#xff0c;主要 copy 自苏神的文章&#xff0c;仅供自己参考&#…...

【计算机网络入门】初学计算机网络(七)

目录 1. 滑动窗口机制 2. 停止等待协议&#xff08;S-W&#xff09; 2.1 滑动窗口机制 2.2 确认机制 2.3 重传机制 2.4 为什么要给帧编号 3. 后退N帧协议&#xff08;GBN&#xff09; 3.1 滑动窗口机制 3.2 确认机制 3.3 重传机制 4. 选择重传协议&#xff08;SR&a…...

Conda 环境搭建实战:从基础到进阶

在当今复杂多变的软件开发与数据科学领域&#xff0c;拥有一个稳定、可复现且易于管理的开发环境是项目成功的基石。Conda 作为一款强大的跨平台环境管理与包管理工具&#xff0c;为开发者提供了便捷高效的环境搭建与依赖管理解决方案。本文将深入探讨 Conda 环境搭建的实战技巧…...

从需求到代码:基于快马平台ai生成spring boot电商系统实战项目

从需求到代码&#xff1a;基于快马平台AI生成Spring Boot电商系统实战项目 最近在做一个电商订单处理系统的项目&#xff0c;正好尝试了用InsCode(快马)平台来快速生成Spring Boot代码。整个过程比我预想的要顺畅很多&#xff0c;特别是对于这种包含多个模块的中型项目&#x…...

拆解RTX4090 24G GPU服务器,一文摸清硬件搭配逻辑

RTX4090 24G GPU凭借NVIDIA Ada Lovelace架构优势&#xff0c;以16384个CUDA核心、24GB GDDR6X显存、1008GB/s显存带宽的核心参数&#xff0c;成为个人开发者、中小企业、科研机构的首选算力核心&#xff0c;广泛应用于大模型训练、AI推理、工业仿真、视频渲染等场景。据IDC 20…...

AI写专著必备!专业工具深度剖析,解决写作难题

对于学术研究者来说&#xff0c;写一本专著可不是一朝一夕的灵感闪现&#xff0c;而是一次长达几年的坚持与努力。从选题构思开始&#xff0c;到科学合理的章节布局&#xff0c;再到逐字逐句的内容填充和文献的逐一核对&#xff0c;每个环节都不容小觑。研究者们常常需要在教学…...

SMUDebugTool终极指南:轻松解锁AMD Ryzen处理器的隐藏性能

SMUDebugTool终极指南&#xff1a;轻松解锁AMD Ryzen处理器的隐藏性能 【免费下载链接】SMUDebugTool A dedicated tool to help write/read various parameters of Ryzen-based systems, such as manual overclock, SMU, PCI, CPUID, MSR and Power Table. 项目地址: https:…...

ChilloutMix模型实战:从零部署到高效生成AI图像

ChilloutMix模型实战&#xff1a;从零部署到高效生成AI图像 【免费下载链接】chilloutmix_NiPrunedFp32Fix 项目地址: https://ai.gitcode.com/hf_mirrors/emilianJR/chilloutmix_NiPrunedFp32Fix ChilloutMix是一个基于Stable Diffusion架构的AI图像生成模型&#xff…...

揭秘ExplorerPatcher:让Windows界面回归经典的实用工具

揭秘ExplorerPatcher&#xff1a;让Windows界面回归经典的实用工具 【免费下载链接】ExplorerPatcher This project aims to enhance the working environment on Windows 项目地址: https://gitcode.com/GitHub_Trending/ex/ExplorerPatcher 你是否对Windows 11的新界面…...

AI建站避坑指南:高频问题与真相解答,别再交学费

决定用AI建站工具&#xff0c;是通往高效的第一步。但市面上信息繁杂&#xff0c;一个不小心就可能掉进“智能”的陷阱。这篇整理了用户最关心的10个核心问题&#xff0c;给出客观、可落地的解答&#xff0c;帮你提前排雷&#xff0c;做出真正明智的选择。1问题1&#xff1a;智…...

深度解析JetBrains IDE试用期重置:3种实用方案提升开发效率

深度解析JetBrains IDE试用期重置&#xff1a;3种实用方案提升开发效率 【免费下载链接】ide-eval-resetter 项目地址: https://gitcode.com/gh_mirrors/id/ide-eval-resetter JetBrains IDE试用期重置工具是一款开源项目&#xff0c;专为开发者提供重置IntelliJ IDEA、…...

打破语言壁垒:GitHub全界面本地化实践指南

打破语言壁垒&#xff1a;GitHub全界面本地化实践指南 【免费下载链接】github-chinese GitHub 汉化插件&#xff0c;GitHub 中文化界面。 (GitHub Translation To Chinese) 项目地址: https://gitcode.com/gh_mirrors/gi/github-chinese 作为全球最大的代码托管平台&am…...

效率提升:用快马ai加速openclaw在ubuntu上的抓取方案寻优与评估

最近在做一个机器人抓取优化的项目&#xff0c;需要在Ubuntu系统上使用OpenClaw库来实现高效的物体抓取方案。整个过程涉及到抓取位姿生成、稳定性评估和碰撞检测等多个环节&#xff0c;手动编码调试起来特别耗时。后来尝试用InsCode(快马)平台的AI辅助功能&#xff0c;发现能大…...