vue3项目中的404页面

vue3项目中的404页面

春节前的最后一篇技术博客了

写了不少vue项目,发现一直没有正确处理404页面。404页面的出现有这么几种可能:

  • 错误输入了页面地址
  • 路由连接跳转时,某些路由已经不存在了,而程序员并没有正确处理

也就是说404页面是为了防止用户访问不存在的路由地址而设计的,当用户访问一个不存在的地址时,这个地址将会重定向至404页面

看一下最后的效果:

在这里插入图片描述

一、路由设计

在vue项目中,需要设计404页面的路由

在路由文件router/index.js中编写代码:

import { createRouter, createWebHistory } from "vue-router";
import Main from "@/views/Main.vue";const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{// 其他路由},// 路由页面{path: '/404',name: '404page',component: () => import('@/views/404/index.vue'),},// 未知路由重定向{path: '/:pathMatch(.*)',redirect: '/404',hidden: true}],
});export default router;

二、404组件

直接上代码了

<template><div class="body"><div class="mars"></div><img src="./images/404.svg" class="logo-404"><img src="./images/meteor.svg" class="meteor"><p class="title">Oh no!!</p><p class="subtitle">页面未找到<br>要么请求一个不再在这里的页面。</p><div align="center"><a class="btn-back" href="/">返回首页</a></div><img src="./images/astronaut.svg" class="astronaut"><img src="./images/spaceship.svg" class="spaceship"></div>
</template><script setup>
</script><style lang="scss" scoped>
@keyframes floating {from {transform: translateY(0px);}65% {transform: translateY(15px);}to {transform: translateY(0px);}
}.body {background-image: url("./images/star.svg"), linear-gradient(to bottom, #05007A, #4D007D);height: 100vh;margin: 0;background-attachment: fixed;overflow: hidden;
}.mars {left: 0;right: 0;bottom: 0;position: absolute;height: 27vmin;background: url("./images/mars.svg") no-repeat bottom center;background-size: cover;
}.logo-404 {position: absolute;margin-left: auto;margin-right: auto;left: 0;right: 0;top: 16vmin;width: 30vmin;
}@media (max-width: 480px) and (min-width: 320px) {.logo-404 {top: 45vmin;}
}.meteor {position: absolute;right: 2vmin;top: 16vmin;
}.title {color: white;font-family: "Nunito", sans-serif;font-weight: 600;text-align: center;font-size: 5vmin;margin-top: 31vmin;
}@media (max-width: 480px) and (min-width: 320px) {.title {margin-top: 65vmin;}
}.subtitle {color: white;font-family: "Nunito", sans-serif;font-weight: 400;text-align: center;font-size: 3.5vmin;margin-top: 10vmin;margin-bottom: 9vmin;
}.btn-back {border: 1px solid white;color: white;height: 5vmin;padding: 12px;font-family: "Nunito", sans-serif;text-decoration: none;border-radius: 5px;
}.btn-back:hover {background: white;color: #4D007D;
}@media (max-width: 480px) and (min-width: 320px) {.btn-back {font-size: 3.5vmin;}
}.astronaut {position: absolute;top: 18vmin;left: 10vmin;height: 30vmin;animation: floating 3s infinite ease-in-out;
}@media (max-width: 480px) and (min-width: 320px) {.astronaut {top: 2vmin;}
}.spaceship {position: absolute;bottom: 15vmin;right: 24vmin;
}@media (max-width: 480px) and (min-width: 320px) {.spaceship {width: 45vmin;bottom: 18vmin;}
}</style>

页面的动画效果主要由样式中的keyframes提供,而图像全都由相应的svg文件提供,svg文件我已经免费上传了

svg文件

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/678575.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CSS基础---新手入门级详解

CSS:层叠样式表 CSS&#xff08;Cascading Style Sheets,层叠样式表&#xff09;&#xff0c;是一种用来为结构化文档添加样式&#xff08;字体、间距和颜色&#xff09;的计算机语言&#xff0c;css扩展名为.css。 实例: <!DOCTYPE html><html> <head><…

OpenAI---提示词工程的6大原则

OpenAI在官方的文档里上线了Prompt engineering&#xff0c;也就是提示词工程指南&#xff0c;其中OpenAI有提到写提示词的6条大的原则&#xff0c;它们分别是&#xff1a; &#xff08;1&#xff09;Write clear instructions&#xff08;写出清晰的指令&#xff09; &#xf…

STM32CubeMX,定时器之定时功能,入门学习,如何设置prescaler,以及timer计算PWM输入捕获方法(重要)

频率变小&#xff0c;周期变长 1&#xff0c;参考链接&#xff08;重要&#xff09; STM32CubeMX——定时器之定时功能&#xff08;学习使用timer定时器的设置&#xff09; STM32测量PWM信息&#xff08;学习使用设置pwm输入捕获&#xff09; 通用定时器中两个重要参数的设置心…

Pytorch+NCCL源码编译

目录 环境1. 安装cudnn2. 使用pytorch自带NCCL库进行编译3. 修改NCCL源代码并重新编译后测试&#xff0c;体现出源码更改 环境 Ubuntu 22.04.3 LTS (GNU/Linux 5.15.0-91-generic x86_64)cuda 11.8 cudnn 8python 3.10torch V2.0.1 nccl 2.14.3NVIDIA GeForce RTX 4090 *2 1.…

快速搭建 nfs 环境, 解决 nfs 搭建时的疑难杂症

博客原文 nfs 环境搭建 简介: NFS&#xff08;Network File System&#xff09;即网络文件系统&#xff0c;是FreeBSD支持的文件系统中的一种&#xff0c;它允许网络中的计算机之间共享资源。 在NFS的应用中&#xff0c;本地NFS的客户端应用可以透明地读写位于远端NFS服务器上…

[ai笔记2] 团年饭ai制图大比拼

欢迎来到文思源想的ai空间&#xff0c;这是技术老兵重学ai以及成长思考的第2篇分享&#xff01; 今天我们用国内七个大厂的ai制图工具做一下团年饭图片&#xff01; 1 团年饭ai制图大比拼 昨天期待了许久的ai春晚&#xff0c;并没有如期举行&#xff0c;换成了初一晚上&…

Vue源码系列讲解——模板编译篇【一】(综述)

目录 1. 前言 2. 什么是模板编译 3. 整体渲染流程 4. 模板编译内部流程 4.1 抽象语法树AST 4.2 具体流程 5. 总结 1. 前言 在前几篇文章中&#xff0c;我们介绍了Vue中的虚拟DOM以及虚拟DOM的patch(DOM-Diff)过程&#xff0c;而虚拟DOM存在的必要条件是得先有VNode&…

随机MM引流源码PHP开源版

引流源码最新随机MM开源版PHP源码&#xff0c;非常简洁好看的单页全解代码没任何加密 直接上传即可用无需数据库支持主机空间

vue3初识

目录 一、前言二、主观感受三、vue3初探 原文以及该系列教程文章后续可点击这里查看&#xff1a;vue初识 一、前言 Vue.js是一款流行的前端框架&#xff0c;最初由尤雨溪&#xff08;Evan You&#xff09;于2014年创建&#xff0c;非常的年轻。官网为vue3&#xff0c; 但要注…

OpenCV基础

OpenCV简介 OpenCV是一个功能强大的开源计算机视觉和机器学习软件库&#xff0c;它在图像处理和视频分析领域得到了广泛应用。OpenCV最初由英特尔公司于1999年发起并支持&#xff0c;后来由Willow Garage和Itseez&#xff08;现在是Intel的一部分&#xff09;维护。它是为了推…

题目练习(生死时速2.0版)

题目一&#xff08;Before an Exam&#xff09; 题意翻译 题目背景 明天皮特将要考生物。他并不很喜欢生物&#xff0c;但在 d 天前他得知他将不得不参加此次考试。皮特严厉的父母勒令他立即复习&#xff0c;因此他在第 i 天将需要学习不少于 minTimei​ 小时&#xff0c;不…

人工智能深度学习入门指南

随着人工智能&#xff08;AI&#xff09;技术的飞速发展&#xff0c;深度学习作为其重要分支&#xff0c;已经成为许多领域的研究热点。深度学习通过模拟人脑神经网络的运作方式&#xff0c;使得机器能够处理和分析海量的数据&#xff0c;从而实现更高级别的智能。本文将为你提…

SPI NOR FLASH和SPI NAND FLASH

SPI NOR FLASH和SPI NAND FLASH是两种不同的存储设备&#xff0c;它们在硬件接口和软件应用上都有所不同。以下是关于这两种存储设备更详细的介绍&#xff1a; 1.SPI NOR FLASH SPI NOR FLASH是一种非易失性存储器&#xff0c;它通过串行接口进行数据传输&#xff0c;具有读写…

IT行业有哪些证书含金量高?

1.Amazon Certified Cloud Practitioner 转码小白超友好的一门入门级证书&#xff0c;对于之前没有IT或者project经验的同学也可以轻轻松松顺利拿下&#xff0c;含金量很高可以直接标到linkedln的个人介绍里面。 (1)将如何帮助职业生涯 获得此认证可验证对 AWS Cloud、服务和…

真、开源LLM-OLMo

论文&#xff1a;https://arxiv.org/pdf/2402.00838.pdf Weights https://huggingface.co/allenai/OLMo-7B Code https://github.com/allenai/OLMo Data https://huggingface.co/datasets/allenai/dolma Evaluation https://github.com/allenai/OLMo-Eval Adaptation http…

分享88个表单按钮JS特效,总有一款适合您

分享88个表单按钮JS特效&#xff0c;总有一款适合您 88个表单按钮JS特效下载链接&#xff1a;https://pan.baidu.com/s/1v-qcl8bv2kxZ8a98Xo9UAg?pwd8888 提取码&#xff1a;8888 Python采集代码下载链接&#xff1a;采集代码.zip - 蓝奏云 学习知识费力气&#xff0c;…

【教3妹学编程-算法题】价值和小于等于 K 的最大数字

3妹&#xff1a;2哥&#xff0c;新年好鸭~ 2哥 : 新年好&#xff0c;3妹这么早啊 3妹&#xff1a;是啊&#xff0c;新年第一天要起早&#xff0c;这样就可以起早一整年 2哥 :得&#xff0c;我还不了解你&#xff0c;每天晒到日上三竿 3妹&#xff1a;嘿嘿嘿嘿&#xff0c;一年是…

安装了多个Java版本如何指定特定版本

Java版本问题的实战场景 机器安装了一个JDK 8的安装版本&#xff0c;默认的安装路径是 C:\Program Files\Java&#xff0c;JDK的安装版本同时安装了JDK 和JRE, 安装的路径分别是&#xff1a; JDK 路径&#xff1a; C:\Program Files\Java\jdk1.8.0_361JRE 路径&#xff1a; C…

【数据结构和算法】--- 基于c语言排序算法的实现(2)

目录 一、交换排序1.1 冒泡排序1.2 快速排序1.2.1 hoare法1.2.2 挖坑法1.2.3 前后指针法 1.3 快速排序优化1.3.1 三数取中法选key1.3.2 递归到小的子区间使用插入排序 1.4 快排非递归版 二、归并排序2.1 归并排序2.1.1 递归版2.1.2 非递归版 一、交换排序 基本思想&#xff1a…

VSCode:替换空行

有时从不同的编辑器拷贝过来的代码会有很多空行&#xff0c;可以通过以下办法进行删除&#xff1a; 1.按CtrlH弹出替换窗口 2.在查找输入框中输入&#xff1a;^\s*(?\r?$)\n 3.点击使用正则表达式 4.点击全部替换