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

前端404页面的制作

1、背景

 前端开发经常遇到输入路径不存在的问题,为此,把之前项目的404拿出来供大家参考。代码很简单,适合新手入手,效果如下:

2、代码引用的是element-plus框架

<template><div><el-result icon="warning" title="404提示" sub-title="你找的页面不存在,点击下方按钮回家~"><template #extra><el-button type="primary" @click="$router.push('/')">回到home页</el-button></template></el-result></div>
</template>

3、路由配置

import { createRouter, createWebHashHistory } from 'vue-router'import Index from '~/pages/index.vue'
import NOTFOUND from '~/pages/404.vue'const routes = [{path: "/",component: Index,
}, {path: '/:pathMatch(.*)*',name: 'NOTFOUND',component: NOTFOUND
}]const router = createRouter({history: createWebHashHistory(),routes
})export default router

相关文章:

前端404页面的制作

1、背景 前端开发经常遇到输入路径不存在的问题&#xff0c;为此&#xff0c;把之前项目的404拿出来供大家参考。代码很简单&#xff0c;适合新手入手&#xff0c;效果如下&#xff1a; 2、代码引用的是element-plus框架 <template><div><el-result icon"…...

深兰科技轮腿家用AI机器人荣获“2023年度城市更新科创大奖”

近日&#xff0c;“2023金砖论坛第五季金立方城市更新科创大会”在上海举行&#xff0c;会上发布了《第12届金砖价值榜》&#xff0c;深兰科技研发出品的轮腿式家用AI机器人(兰宝)&#xff0c;因其AI技术的创新性应用&#xff0c;荣获了“2023年度城市更新科创大奖”。 在10月2…...

669.修剪二叉树

原题链接:669.修剪二叉树 全代码&#xff1a; class Solution { public:TreeNode* trimBST(TreeNode* root, int low, int high) {if (root nullptr ) return nullptr;if (root->val < low) {TreeNode* right trimBST(root->right, low, high); // 寻找符合区间[l…...

论文绘图-机器学习100张模型图

在现代学术研究和技术展示中&#xff0c;高质量的图表和模型结构图是至关重要的。这尤其在机器学习领域更为显著&#xff0c;一个领域以其复杂的算法和复杂的数据结构而闻名。机器学习是一种使用统计技术使计算机系统能够从数据中学习和改进其任务执行的方法&#xff0c;而有效…...

PHP项目学习笔记-萤火商城-增加一个模块(表涉及到的操作和文件)

背景 是在store的后台添加一个页面&#xff0c;显示的如满意度调查的页面 在router.config.js里面配置一个新的菜单 路径&#xff1a;yoshop2.0-store\src\config\router.config.js 代码如下&#xff0c;很简单&#xff0c;定义了这菜单点击的时候进入的页面&#xff0c;和下面…...

如何用Java设计自动售货机?

如何用Java设计自动售货机?是大多在高级Java开发人员面试中经常被问到的好问题之一。在典型的编码面试中,你会得到一个问题描述来开发一个售货机,在有限的时间内,通常2到3小时内,你需要在Java中编写设计文档、工作代码和单元测试。这种Java面试的一个关键优势是可以一次测试候…...

JAVA数据代码示例

首先&#xff0c;我们需要导入一些必要的Java库 java import java.net.URL; import java.net.HttpURLConnection; import java.io.BufferedReader; import java.io.InputStreamReader; 然后&#xff0c;我们可以创建一个URL对象&#xff0c;表示我们要爬取的网页的URL。 jav…...

github常用搜索指令

一、常用搜索指令 以下指令可分开用&#xff0c;也可组合使用 根据关键字搜索 in:name xx继上一步&#xff1a;指定开发语言 language:Java in:name XX language:Java继上一步&#xff0c;指定更新日期 pushed:>2022-06-06 in:name XX language:Java pushed:>2022-0…...

为什么esp8266刷入了固件,无法接受AT指令

我遇到的解决方法是&#xff1a;是串口调试助手出了问题。所以需要更换一个串口调试助手软件。 上面这个就是我换了的软件 在开发的时候&#xff0c;经常会遇到软件故障&#xff0c;导致正确的方法&#xff0c;但是没有效果&#xff0c;好比以前用盗版的8.7版本的Proteus模拟…...

Scala---字符串、集合

一、字符串 StringStringBuilder 可变string操作方法举例 比较:equals比较忽略大小写:equalsIgnoreCaseindexOf&#xff1a;如果字符串中有传入的assci码对应的值&#xff0c;返回下标 1./** 2.* String && StringBuilder 3.*/ 4.val str "abcd" 5.val s…...

Power Automate-当收到HTTP请求时触发流程

选择创建自动化云端流&#xff0c;点跳过 第一个操作搜索HTTP&#xff0c;点击当收到HTTP请求时 点击使用示例有效负载生成架构 写入JSON&#xff0c;点击完成 正文JSON架构就自动生成了&#xff0c;再点击左下角的显示高级选项 Method根据需求选择 可以选择JSON中的参数赋值给…...

学习c#的第十四天

目录 C# 接口&#xff08;Interface&#xff09; 接口的特点 定义接口 接口继承 接口和抽象类的区别 C# 命名空间&#xff08;Namespace&#xff09; using 关键字 定义命名空间 嵌套命名空间 C# 接口&#xff08;Interface&#xff09; 接口定义了所有类继承接口时应…...

6.jvm中对象创建流程与内存分配

目录 概述对象的创建流程对象的内存分配方式对象怎样才会进入老年代大对象直接进入老年代内存担保 jvc 相关指令查看jdk默认使用的gc查看当前jdk支持的有哪些gc查看指定进程当前正在使用的gc 结束 概述 相关文章在此总结如下&#xff1a; 文章地址jvm基本知识地址jvm类加载系…...

算法--搜索与图

这里写目录标题 主要内容DFS思想 BFS思想 DFS与BFS的比较一级目录二级目录二级目录二级目录 一级目录二级目录二级目录二级目录 一级目录二级目录二级目录二级目录 主要内容 DFS 思想 会优先向深处搜索 一旦到达最深处 那么会回溯 但是在回溯的过程中 会边回溯边观察是否有能继…...

ROS 文件系统

ROS文件系统级指的是在硬盘上ROS源代码的组织形式&#xff0c;ROS 的文件系统本质上都还是操作系统文件&#xff0c;可以使用Linux命令来操作这些文件&#xff0c;文件操作&#xff0c;包含增删改查与执行等操作&#xff0c;ROS文件系统的一些常用命令如下&#xff1a; 1.增加…...

车载通信与DDS标准解读系列(1):DDS-RPC

▎RPC & DDS-RPC RPC&#xff1a;Remote Procedure Call&#xff0c;远程过程调用。 远程过程调用是一种进程间通信&#xff0c;它允许计算机程序在另一个地址空间中执行子程序&#xff0c;就好像用别人的东西像用自己的一样&#xff0c;常用于分布式系统。 远程过程调用…...

通过构造树形结构介绍map的用法

构造TreeSelect树形结构&#xff1a; 当我们拿到的数据与我们要用的数据不一致时&#xff0c;就要改造成自己想要的数据结构。 后端拿到的数据结构&#xff1a; public class TPMGroup{public string DepName { get; set; }public List<staff> TPMList { get; set; }pu…...

代码随想录算法训练营Day 53 || 1143.最长公共子序列、1035.不相交的线、53. 最大子序和

1143.最长公共子序列 力扣题目链接 给定两个字符串 text1 和 text2&#xff0c;返回这两个字符串的最长公共子序列的长度。 一个字符串的 子序列 是指这样一个新的字符串&#xff1a;它是由原字符串在不改变字符的相对顺序的情况下删除某些字符&#xff08;也可以不删除任何…...

Oracle JDBC数据库驱动程序介绍

Maven Central上所有Oracle JDBC数据库驱动程序 现在不仅可以在Maven Central上使用甲骨文数据库最新版本&#xff0c;而且还可以获得所有受支持的Oracle JDBC驱动程序发行版&#xff0c;包括19.3.0.0、18.3.0.0、12.2.0.1和11.2.0.4。从现在开始&#xff0c;Maven Central确实…...

scipy实现单因素方差分析

经典例题 某校高二年级共有四个班&#xff0c;采用四种不同的教学方法进行数学教学&#xff0c;为了比较这四种教学法的效果是否存在明显的差异&#xff0c;期末统考后&#xff0c;从这四个班中各抽取 5 名考生的成绩&#xff0c;如下所示。 班级 一班 二班 三班 四班 …...

零门槛NAS搭建:WinNAS如何让普通电脑秒变私有云?

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议&#xff08;EPSFD 2025&#xff09;将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会&#xff0c;EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

CentOS下的分布式内存计算Spark环境部署

一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架&#xff0c;相比 MapReduce 具有以下核心优势&#xff1a; 内存计算&#xff1a;数据可常驻内存&#xff0c;迭代计算性能提升 10-100 倍&#xff08;文档段落&#xff1a;3-79…...

Neo4j 集群管理:原理、技术与最佳实践深度解析

Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档,本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石,用于构建高可用、可扩展且一致的图数据库服务…...

新能源汽车智慧充电桩管理方案:新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

LeetCode - 199. 二叉树的右视图

题目 199. 二叉树的右视图 - 力扣&#xff08;LeetCode&#xff09; 思路 右视图是指从树的右侧看&#xff0c;对于每一层&#xff0c;只能看到该层最右边的节点。实现思路是&#xff1a; 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...

浪潮交换机配置track检测实现高速公路收费网络主备切换NQA

浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求&#xff0c;本次涉及的主要是收费汇聚交换机的配置&#xff0c;浪潮网络设备在高速项目很少&#xff0c;通…...

搭建DNS域名解析服务器(正向解析资源文件)

正向解析资源文件 1&#xff09;准备工作 服务端及客户端都关闭安全软件 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 2&#xff09;服务端安装软件&#xff1a;bind 1.配置yum源 [rootlocalhost ~]# cat /etc/yum.repos.d/base.repo [Base…...

LabVIEW双光子成像系统技术

双光子成像技术的核心特性 双光子成像通过双低能量光子协同激发机制&#xff0c;展现出显著的技术优势&#xff1a; 深层组织穿透能力&#xff1a;适用于活体组织深度成像 高分辨率观测性能&#xff1a;满足微观结构的精细研究需求 低光毒性特点&#xff1a;减少对样本的损伤…...