vue3:三项目增加404页面

一、路由添加 1、官网地址

带参数的动态路由匹配 | Vue Router router.vuejs.org/zh/guide/essentials/dynamic-matching.html

2、复制核心语句

{ path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound }

3、粘贴到路由index.js中

4、建立页面

在view文件夹中建立NotFoundView.vue文件夹

5、修改路由中404页面的路径

将404页面路路径指定刚才新建立的页面

二、编写404页面代码 1、页面效果

2、代码展示 ①404页面编辑

NotFoundView.vue

<template> <div class="page flex flex-center"> <div class="content flex flex-between"> <div class="img flex flex-center"> <img src="/public/img/404.png" alt="=" srcset=""> </div> <div class="title flex flex-center flex-column"> <p>The page does not exist</p> <div> <router-link to="/"> <el-button>返回主页</el-button> </router-link> </div> </div> </div> </div> </template> <style> .page { height: 100vh; background-color: #eaf0fe; } .content { height: 400px; width: 800px; border-radius: 10px; } .content .img { height: 100%; width: 45%; background-color: #abc4fc; border-top-left-radius: 10px; border-bottom-left-radius: 10px; } .img img { width: 80%; height: 80%; } .title { background-color: #fff; width: 55%; height: 100%; border-top-right-radius: 10px; border-bottom-right-radius: 10px; } p { margin-bottom: 20px; font-size:20px; } :root { --el-fill-color-blank: #f97ca7; --el-text-color-regular: #fff; --el-color-primary: #f97ca7; --el-color-primary-light-9: #fff; --el-color-primary-light-7: #f97ca7; --el-border-radius-base:20px; --el-font-size-base:12px; } </style>

注 ：

el按钮的样式编写

如上图的代码内容是改写的el-button自带的按钮效果

如上图：在浏览器页面中要查看按钮的相关样式，可打卡F12进行代码查看

例如：

--el-button-bg-color: var(--el-fill-color-blank);

这个表示，按钮的--el-button-bg-color属性的值是变量--el-fill-color-blank的值，可在base.css中定义或重写

在:root中进行编写变量信息即可

这里我不需要设置全部变量，我只是修改我页面的数据，那么我直接写在我的页面中即可

全局css其实是main.css，只是在内部引入了base.css才可使用

返回首页的按钮跳转功能

<router-link to="/">          <el-button>返回主页</el-button> </router-link>

这里使用router-ink 进行跳转，to的值表示跳转到的页面位置

这里采用的 /，是主页面的路径表示

②main.css

在main.css中写入多页面都可能引入的常见样式，如下图

6、测试404页面是否建立成功

现在即可打开任意不存在的页面