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

Vue3实战笔记(21)—自定义404页面

文章目录

  • 前言
  • 一、标题1
  • 二、通过守卫导航配置404
  • 总结


前言

一个精致的404页面对于网站的用户体验至关重要。404页面,也称为“未找到”页面,是在用户尝试访问网站中不存在或已删除的页面时显示的。


一、标题1

404都很熟悉了,vue3默认找不到界面会一片空白:
在这里插入图片描述
先创建一个404.vue:


<template><div><div style="font-size:100px; color:black; position:fixed;box-shadow: 0px 0px 0px #ccc; left:50%;top:33%; " >404</div></div>
</template><script setup lang="ts" name=""></script><style lang='less' scoped>
</style>

vue3自定义404界面路由,首先配置路由添加:

import {createRouter,createWebHistory} from 'vue-router'{// 会匹配所有路径path: "/:pathMatch(.*)*",component: notFound}

完整路由源码,其他配置项可以不看:

//路由器
import {createRouter,createWebHistory} from 'vue-router'
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'
import Login from '@/views/Login.vue'
import CheckboxVue from '@/views/Checkbox.vue'
import vList from '@/components/vlist.vue'
import notFound from '@/views/errors/404.vue'//创建路由器
const router = createRouter({history:createWebHistory(),routes:[{path:'/',component:Home},{path:'/about',component:About},{path:'/login',component:Login},{path:'/checkbox',component:CheckboxVue},{path:'/vlist',component:vList},{// 会匹配所有路径path: "/:pathMatch(.*)*",component: notFound}]
})   

随便输入个123456路径,路由匹配不上就跳转到了404页面:
在这里插入图片描述

二、通过守卫导航配置404

还有另一种方式,守卫导航(这种配置方式可能考虑的情况要全面一些不然可能会出现奇怪的问题,以后再测试一下。):
代码如下(示例):


router.beforeEach((to, from, next) => {if (to.matched.length === 0) { //匹配前往的路由不存在from.name ? next({name: from.name}) : next('/errorinfo'); //判断此跳转路由的来源路由是否存在,存在的情况跳转到来源路由,否则跳转到404页面} else {next(); //如果匹配到正确跳转}
})

总结

一个精心设计的404页面不仅能够以优雅的方式通知用户页面不存在,还能够提供帮助、导航回主页或其他相关页面的选项,从而减少用户流失,提高用户体验。

“成功不是偶然,而是由一系列努力和坚持组成。” ——科林·鲍威尔

相关文章:

Vue3实战笔记(21)—自定义404页面

文章目录 前言一、标题1二、通过守卫导航配置404总结 前言 一个精致的404页面对于网站的用户体验至关重要。404页面&#xff0c;也称为“未找到”页面&#xff0c;是在用户尝试访问网站中不存在或已删除的页面时显示的。 一、标题1 404都很熟悉了&#xff0c;vue3默认找不到界…...

乡村振兴的农村产业融合发展:推动农村一二三产业融合发展,培育农村新产业新业态,打造产业兴旺的美丽乡村

目录 一、引言 二、农村一二三产业融合发展的重要性 1、促进农村产业结构调整 2、拓宽农民增收渠道 3、推动城乡融合发展 三、推动农村一二三产业融合发展的路径 1、加强政策引导和支持 2、优化产业布局和规划 3、创新产业模式和业态 4、加强人才培养和引进 5、加强…...

运维别卷系列 - 云原生监控平台 之 08.prometheus grafana 实践

文章目录 [toc]部署 Grafana准备配置文件grafana.iniprovisioning/datasources/prometheus.yamlprovisioning/dashboards/dashboards.yamlprovisioning/dashboards/views 创建 svc创建 deployment Grafana 是一个图形化界面&#xff0c;配置 Prometheus 作为数据源&#xff0c;…...

【原创】java+springboot+mysql企业邮件管理系统设计与实现

个人主页&#xff1a;程序猿小小杨 个人简介&#xff1a;从事开发多年&#xff0c;Java、Php、Python、前端开发均有涉猎 博客内容&#xff1a;Java项目实战、项目演示、技术分享 文末有作者名片&#xff0c;希望和大家一起共同进步&#xff0c;你只管努力&#xff0c;剩下的交…...

【Pytorch】torch.nn.conv2d

这个函数和我们之前提到的【Pytorch】6.torch.nn.functional.conv2d的使用的作用相似&#xff0c;都是完成CV领域的卷积操作&#xff0c;这里就不在过多赘述 torch.nn.conv2d的使用 打开pytorch的官方文档&#xff0c;我们可以看到 torch.nn.conv2d包含了若干参数 in_channe…...

WPF之DataGird应用

1&#xff0c;DataGrid相关属性 GridLinesVisibility&#xff1a;DataGrid网格线是否显示或者显示的方式。HorizontalGridLinesBrush&#xff1a;水平网格线画刷。VerticalGridLinesBrush&#xff1a;垂直网格线画刷。HorizontalScrollBarVisibility&#xff1a;水平滚动条可见…...

linux内核debug(二)在线调试内核kdb/kgdb工具使用及环境搭建

目录 一、引言 二、kgdb调试 ------>2.1、kgdb板端配置 ------------>2.1.1、添加编译内核参数 ------------>2.1.2、配置 ------>2.2、kgdb本地调试环境搭建 ------------>2.2.1、串口工具 ------------>2.2.2、连接板端 ------>2.3、kgdb调试 …...

解决“电脑开机黑屏Explorer进程卡死“问题

今天&#xff0c;给台式机按电源键&#xff0c;进入windows系统时&#xff0c;发现电脑黑屏了&#xff0c;昨天还好好的&#xff0c;怎么今天电脑桌面进不去了&#xff1f;想起Windows XP、Windows 7、Windows 10 、Windows 11等系统&#xff0c;在使用多个文件拷贝时&#xff…...

阿里云学习笔记2

企业应用服务 域名以及DNS内容分发网络CDN云监控 1、使用数字证书管理服务申请证书时&#xff0c;需要选择加密算法&#xff0c;通过加密算法得到的密钥对可以保证在世界范围内是唯一的。阿里云SSL证书服务支持______、______和______三种加密算法&#xff0c;可根据不同证书…...

【回溯】1240. 铺瓷砖

本文涉及知识点 回溯 LeetCode1240. 铺瓷砖 你是一位施工队的工长&#xff0c;根据设计师的要求准备为一套设计风格独特的房子进行室内装修。 房子的客厅大小为 n x m&#xff0c;为保持极简的风格&#xff0c;需要使用尽可能少的 正方形 瓷砖来铺盖地面。 假设正方形瓷砖的…...

【Unity Shader入门精要 第7章】基础纹理(一)

1. 纹理映射 每一张纹理可以看作拥有一个属于自己的2D坐标空间&#xff0c;其横轴用U表示&#xff0c;纵轴用V表示&#xff0c;因此也称为UV坐标空间。 UV空间的坐标范围为[0&#xff0c;0]到[1&#xff0c;1]&#xff0c;在Unity中&#xff0c;UV空间也是从左下到右上&#…...

el-checkbox选中后的值为id,组件显示为label中文

直接上代码 方法一 <el-checkbox v-for"item in list" :key"item.id" :label"item.id">{{中文}} </el-checkbox> 方法二 <el-checkbox-group class"flex_check" v-model"rkStatusList" v-for"item…...

03-数据结构(一)

链接&#xff1a;C# 数据结构_哔哩哔哩_bilibili https://www.bilibili.com/video/BV1a541147Nk/?spm_id_from333.337.search-card.all.click&vd_source6eb7d966aa03ff5cb02b63725f651e68 链接&#xff1a;使用 C#.Net 学习掌握数据结构 (更新中)_哔哩哔哩_bilibili 一…...

MySQL问题记录-主机被锁问题

主机被锁问题 描述&#xff1a;"Host ‘113.109.111.217’ is blocked because of many connection errors 原因&#xff1a;同一个ip在短时间内产生太多中断的数据库连接而导致的阻塞&#xff1b; 超过mysql数据库max_connection_errors的最大值&#xff1b; 解决方法…...

用好 explain 妈妈再也不用担心我的 SQL 慢了

大家好&#xff0c;我是聪&#xff0c;一个乐于分享的小小程序员。在不久之前我写了一个慢 SQL 分析工具&#xff0c;可以用来分析 Java Mybatis 项目的 SQL 执行情况&#xff0c;其中刚好涉及到了 explain 的使用。感兴趣的可以了解一下。 Github 地址⭐&#xff1a;https://…...

【漏洞复现】泛微OA E-Cology SignatureDownLoad SQL注入漏洞

漏洞描述&#xff1a; 泛微OA E-Cology是一款面向中大型组织的数字化办公产品&#xff0c;它基于全新的设计理念和管理思想&#xff0c;旨在为中大型组织创建一个全新的高效协同办公环境。泛微OA E-Cology SignatureDownLoad存在SQL注入漏洞&#xff0c;允许攻击者非法访问和操…...

前端工程化,前端监控,工作流,部署,性能

开发规范 创建项目的时候&#xff0c;配置下 ESlint&#xff0c;stylelint&#xff0c; prettier&#xff0c; commitlint 等; ESLint 主要功能&#xff1a; ESLint 是一个静态代码检查工具&#xff0c;用于在 JavaScript 代码中识别和报告模式。它的目标是提供一个插件化的 …...

浅析Java贪心算法

浅析Java贪心算法 在计算机科学中&#xff0c;贪心算法&#xff08;Greedy Algorithm&#xff09;是一种在每一步选择中都采取在当前状态下最好或最优&#xff08;即最有利&#xff09;的选择&#xff0c;从而希望导致结果是全局最好或最优的算法。贪心算法并不总是能够得到全…...

vue3.0(五) reactive全家桶

文章目录 1 reactive1.1 reactive的应用1.2 reactive的特点1.3 reactive的注意1.4 reactive的局限性 2 toRefs3 isReactive4 shallowReactive5 readonly5.1 readonly 详细信息5.2 readonly函数创建一个只读的响应式对象5.3 如何修改嵌套在只读响应式对象中的对象? 6 isReadonl…...

Selenium 自动化 —— 四种等待(wait)机制

更多关于Selenium的知识请访问CSND论坛“兰亭序咖啡”的专栏&#xff1a;专栏《Selenium 从入门到精通》 ​ 目录 目录 需要等待的场景 自己实现等待逻辑 Selenium 提供的三种等待机制 隐式等待&#xff08;Implicit Waits&#xff09; 隐式等待的优点 隐式等待的缺点 …...

stm32G473的flash模式是单bank还是双bank?

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

el-switch文字内置

el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

苍穹外卖--缓存菜品

1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得&#xff0c;如果用户端访问量比较大&#xff0c;数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据&#xff0c;减少数据库查询操作。 缓存逻辑分析&#xff1a; ①每个分类下的菜品保持一份缓存数据…...

让AI看见世界:MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...

JVM虚拟机:内存结构、垃圾回收、性能优化

1、JVM虚拟机的简介 Java 虚拟机(Java Virtual Machine 简称:JVM)是运行所有 Java 程序的抽象计算机,是 Java 语言的运行环境,实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息,使得 Java 程序只需生成在 JVM 上运行的目标代码(字节码),就可以…...

Webpack性能优化:构建速度与体积优化策略

一、构建速度优化 1、​​升级Webpack和Node.js​​ ​​优化效果​​&#xff1a;Webpack 4比Webpack 3构建时间降低60%-98%。​​原因​​&#xff1a; V8引擎优化&#xff08;for of替代forEach、Map/Set替代Object&#xff09;。默认使用更快的md4哈希算法。AST直接从Loa…...

c++第七天 继承与派生2

这一篇文章主要内容是 派生类构造函数与析构函数 在派生类中重写基类成员 以及多继承 第一部分&#xff1a;派生类构造函数与析构函数 当创建一个派生类对象时&#xff0c;基类成员是如何初始化的&#xff1f; 1.当派生类对象创建的时候&#xff0c;基类成员的初始化顺序 …...

解析奥地利 XARION激光超声检测系统:无膜光学麦克风 + 无耦合剂的技术协同优势及多元应用

在工业制造领域&#xff0c;无损检测&#xff08;NDT)的精度与效率直接影响产品质量与生产安全。奥地利 XARION开发的激光超声精密检测系统&#xff0c;以非接触式光学麦克风技术为核心&#xff0c;打破传统检测瓶颈&#xff0c;为半导体、航空航天、汽车制造等行业提供了高灵敏…...

MyBatis中关于缓存的理解

MyBatis缓存 MyBatis系统当中默认定义两级缓存&#xff1a;一级缓存、二级缓存 默认情况下&#xff0c;只有一级缓存开启&#xff08;sqlSession级别的缓存&#xff09;二级缓存需要手动开启配置&#xff0c;需要局域namespace级别的缓存 一级缓存&#xff08;本地缓存&#…...