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

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

Swift 协议扩展精进之路:解决 CoreData 托管实体子类的类型不匹配问题(下)

概述 在 Swift 开发语言中&#xff0c;各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过&#xff0c;在涉及到多个子类派生于基类进行多态模拟的场景下&#xff0c;…...

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下: 重点代码分析: 启动相机前,先要通过getCameraIdList获取camera的个数以及id,然后可以通过getCameraCharacteristics获取对应id camera的capabilities(静态信息)进行一些openCamera前的…...

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

PL0语法,分析器实现!

简介 PL/0 是一种简单的编程语言,通常用于教学编译原理。它的语法结构清晰,功能包括常量定义、变量声明、过程(子程序)定义以及基本的控制结构(如条件语句和循环语句)。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言,由 Niklaus Wirth 设计,用于展示编译原理的核…...

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持&#xff0c;不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

RNN避坑指南:从数学推导到LSTM/GRU工业级部署实战流程

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文全面剖析RNN核心原理&#xff0c;深入讲解梯度消失/爆炸问题&#xff0c;并通过LSTM/GRU结构实现解决方案&#xff0c;提供时间序列预测和文本生成…...

AI书签管理工具开发全记录(十九):嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...