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页面不仅能够以优雅的方式通知用户页面不存在,还能够提供帮助、导航回主页或其他相关页面的选项,从而减少用户流失,提高用户体验。

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

高校推免报名|基于SSM+vue的高校推免报名系统的设计与实现(源码+数据库+文档)

高校推免报名 目录 基于SSM&#xff0b;vue的高校推免报名的设计与实现 一、前言 二、系统设计 三、系统功能设计 1系统功能模块 2后台登录模块 5.2.1管理员功能模块 5.2.2考生功能模版 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八…

【数据结构】解密链表之旅(单链表篇)

前言 哈喽大家好&#xff0c;我是野生的编程萌新&#xff0c;首先感谢大家的观看。数据结构的学习者大多有这样的想法&#xff1a;数据结构很重要&#xff0c;一定要学好&#xff0c;但数据结构比较抽象&#xff0c;有些算法理解起来很困难&#xff0c;学的很累。我想让大家知道…

基于PHP+MySQL开发的 外卖点餐在线二合一小程序源码系统 附带源代码以及系统的部署教程

在移动互联网时代&#xff0c;外卖行业蓬勃发展&#xff0c;各大外卖平台竞争激烈。然而&#xff0c;传统的外卖平台存在诸多问题&#xff0c;如用户体验不佳、操作繁琐、系统性能低下等。罗峰给大家分享一款基于PHPMySQL的外卖点餐在线二合一小程序源码系统。该系统旨在为用户…

FullCalendar日历组件集成实战(3)

背景 有一些应用系统或应用功能&#xff0c;如日程管理、任务管理需要使用到日历组件。虽然Element Plus也提供了日历组件&#xff0c;但功能比较简单&#xff0c;用来做数据展现勉强可用。但如果需要进行复杂的数据展示&#xff0c;以及互动操作如通过点击添加事件&#xff0…

什么是工具? 从语言模型视角的综述

24年3月CMU和上海交大的论文“What Are Tools Anyway? A Survey from the Language Model Perspective”。 到底什么是工具&#xff1f; 接下来&#xff0c;工具在哪里以及如何帮助语言模型&#xff1f; 在综述中&#xff0c;对语言模型使用的外部程序工具进行了统一定义&…

Redis-分片集群存储及读取数据详解

文章目录 Redis分片集群是什么&#xff1f;Redis分片集群的存储及读取数据&#xff1f; 更多相关内容可查看 Redis分片集群是什么&#xff1f; Redis分片集群是一种分布式部署方式&#xff0c;通过将数据分散存储在多个Redis节点上&#xff0c;从而提高了系统的性能、扩展性和…

解密跨境电商ERP开发的5大常见问题及解决方案

跨境电商平台开发是一个充满挑战的领域&#xff0c;企业在此过程中常常面临着各种技术、管理和资源等方面的问题。下面是解析这些问题并提供解决方案的五大主要问题&#xff1a; 1. 集成难题&#xff1a; 在跨境电商平台开发中&#xff0c;一个最为常见的问题是集成不同系统和…

中国高分辨率国家土壤信息网格基本属性数据集(2010-2018)

中国高分辨率国家土壤信息网格基本属性数据集&#xff08;2010-2018&#xff09; 数据介绍 土壤是人类生存和发展的基础&#xff0c;多个联合国可持续发展目标&#xff08;SDGs&#xff09;与土壤资源利用和管理直接相关。然而&#xff0c;全球和我国现有土壤信息大多源于历史土…

酒厂做配送分销小程序商城的作用是什么

线上优势明显&#xff0c;酒厂零售批发需要多渠道进行&#xff0c;品牌宣传、酒水经营分销配送、会员管理以及拓展更多营收可能等&#xff0c;商家与客户都需要完善的体系触达对方。 运用【雨科】平台搭建酒厂商城&#xff0c;电脑手机网页端和微信小程序端&#xff0c;多渠道…

可重构柔性装配系统,为制造业的未来描绘出一幅崭新的蓝图

随着科技的飞速发展&#xff0c;传统的产线设计模式正面临着前所未有的挑战。在这个变革的时代&#xff0c;可重构柔性装配系统凭借其独特的优势&#xff0c;正引领着智能化生产的新浪潮&#xff0c;为制造业的未来描绘出一幅崭新的蓝图。 传统的产线设计往往固定且僵化&#x…

精品录播|电磁场数值仿真技术及天线设计与应用

电磁场数值仿真技术及天线设计与应用

失业,登上了网络悲惨排行榜热传?

几年前&#xff0c;有关“失业”这个话题早就频繁地出现在国内各大社交网站&#xff0c;原以为早已淡化了&#xff0c;殊不知今天浏览国内各大社交网站&#xff0c;惊讶地发现它竟然登上了“悲惨排行榜”并被热传&#xff0c;便认为对此话题有闲聊一会儿的必要。 截图&#xff…

2024年泰迪智能科技专业共建合作方案

泰迪智能科技打造基于产教融合就业育人综合服务平台&#xff0c;深化产教融合&#xff0c;持续完善三位一体的数据智能生态体系&#xff0c;促进教育链、人才链与产业链、创新链的有机衔接&#xff0c;为培养高素质创新人才及企业数据智能应用落地略尽绵薄之力。 2024年泰迪智…

ios与android上音频格式的推荐

首先贴一张官方对于ios与android上音频格式的推荐&#xff1a; 这里只给出了推荐格式&#xff0c;一般我们在实际运用中会使用如下方式&#xff1a; 一、IOS与安卓各一套&#xff1a;音乐&#xff1a;都使用MP3 音效&#xff1a;ios用caf Android用ogg 二、使用通用的MP3格式…

黑马新出的SpringBoot3项目后端总结

基础篇-00_SpringBoot3_Vue3导学课程_哔哩哔哩_bilibili 这个是视频链接 这个新课程里面用了一些企业里会用的注解例如Validated这种&#xff0c;业务流程清晰明了简单上手&#xff0c;算是可以了解最基本的Springboot开发流程&#xff0c;方便上手和快速入门 主要是下面这几…

prompt工程策略(一:使用 CO-STAR 框架来搭建 prompt 的结构)

原文&#xff1a;我是如何赢得GPT-4提示工程大赛冠军的 为了让 LLM 给出最优响应&#xff0c;为 prompt 设置有效的结构至关重要。CO-STAR 框架是一种可以方便用于设计 prompt 结构的模板。该模板考虑了会影响 LLM 响应的有效性和相关性的方方面面&#xff0c;从而有助于得到更…

【送书福利第八期】你好!Python(文末送书)

文章目录 编辑推荐内容简介作者简介目录前言/序言 &#x1f324;️ 粉丝福利 编辑推荐 适读人群 &#xff1a;程序员;相关院校师生 本书以轻松幽默的语言&#xff0c;从零开始介绍Python语言。书名来源于编程语言中最经典的Hello World程序&#xff0c;寓意带读者从入门到精通…

简单的mysql主从复制搭建

文章目录 准备工作用Docker安装MySQL主库配置【192.168.13.32】从库配置【192.168.13.108】小结 准备工作 用虚拟机提前准备两台服务器&#xff0c;并且在服务器中分别安装好MySQL&#xff0c;服务器的信息如下&#xff1a; 数据库IP主节点192.168.13.32从节点192.168.13.108…

使用python开发的闭运算调试器

使用python开发的开运算调试器 简介效果代码 简介 用来调试闭运算效果的小工具&#xff0c;滑动条可以控制滤波核的大小&#xff0c;用来查看不同滤波核下的闭运算效果。 效果 代码 import sys from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QHBoxLayou…

MyBatis缓存的概念

缓存回顾 什么是缓存&#xff1f; 缓存就是内存中的数据&#xff0c;常常来自对数据库查询结果的保存。使用缓存可以避免频繁与数据库交互&#xff0c;进而提高 响应速度 。 MyBatis 对缓存的支持 MyBatis 也提供了对缓存的支持&#xff0c;分为 一级缓存 和 二级缓存。可以…