当前位置: 首页 > 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;如下所示。 班级 一班 二班 三班 四班 …...

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)

说明&#xff1a; 想象一下&#xff0c;你正在用eNSP搭建一个虚拟的网络世界&#xff0c;里面有虚拟的路由器、交换机、电脑&#xff08;PC&#xff09;等等。这些设备都在你的电脑里面“运行”&#xff0c;它们之间可以互相通信&#xff0c;就像一个封闭的小王国。 但是&#…...

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装&#xff08;Encapsulation&#xff09; 定义&#xff1a;将数据&#xff08;属性&#xff09;和操作数据的方法绑定在一起&#xff0c;通过访问控制符&#xff08;private、protected、public&#xff09;隐藏内部实现细节。示例&#xff1a; public …...

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略&#xff0c;并且实现了基本的选区操作&#xff0c;还调研了自绘选区的实现。那么相对的&#xff0c;我们还需要设计编辑器的选区表达&#xff0c;也可以称为模型选区。编辑器中应用变更时的操作范围&#xff0c;就是以模型选区为基准来…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张(Windows/Linux)

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况&#xff0c;可以通过以下几种方式模拟或触发&#xff1a; 1. 增加CPU负载 运行大量计算密集型任务&#xff0c;例如&#xff1a; 使用多线程循环执行复杂计算&#xff08;如数学运算、加密解密等&#xff09;。运行图…...

《基于Apache Flink的流处理》笔记

思维导图 1-3 章 4-7章 8-11 章 参考资料 源码&#xff1a; https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...

【Oracle】分区表

个人主页&#xff1a;Guiat 归属专栏&#xff1a;Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;使用DevEco Studio作为开发工具&#xff0c;采用Java语言实现&#xff0c;包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...

STM32---外部32.768K晶振(LSE)无法起振问题

晶振是否起振主要就检查两个1、晶振与MCU是否兼容&#xff1b;2、晶振的负载电容是否匹配 目录 一、判断晶振与MCU是否兼容 二、判断负载电容是否匹配 1. 晶振负载电容&#xff08;CL&#xff09;与匹配电容&#xff08;CL1、CL2&#xff09;的关系 2. 如何选择 CL1 和 CL…...