中国搜索网站提交入口企业建网站好
一、路由添加
1、官网地址
带参数的动态路由匹配 | Vue Router
https://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页面是否建立成功
现在即可打开任意不存在的页面
