vue3:三项目增加404页面

一、路由添加

1、官网地址

带参数的动态路由匹配 | Vue Routerhttps://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页面是否建立成功

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