个人性质的网站 备注怎么写,西安建筑网站建设,深圳办公室软装,wordpress长图拼接文章目录 前言一、标题1二、通过守卫导航配置404总结 前言
一个精致的404页面对于网站的用户体验至关重要。404页面#xff0c;也称为“未找到”页面#xff0c;是在用户尝试访问网站中不存在或已删除的页面时显示的。 一、标题1
404都很熟悉了#xff0c;vue3默认找不到界… 文章目录 前言一、标题1二、通过守卫导航配置404总结 前言
一个精致的404页面对于网站的用户体验至关重要。404页面也称为“未找到”页面是在用户尝试访问网站中不存在或已删除的页面时显示的。 一、标题1
404都很熟悉了vue3默认找不到界面会一片空白 先创建一个404.vue templatedivdiv stylefont-size:100px; color:black; position:fixed;box-shadow: 0px 0px 0px #ccc; left:50%;top:33%; 404/div/div
/templatescript setup langts name/scriptstyle langless scoped
/stylevue3自定义404界面路由首先配置路由添加
import {createRouter,createWebHistory} from vue-router{// 会匹配所有路径path: /:pathMatch(.*)*,component: notFound}完整路由源码其他配置项可以不看
//路由器
import {createRouter,createWebHistory} from vue-router
import Home from /views/Home.vue
import About from /views/About.vue
import Login from /views/Login.vue
import CheckboxVue from /views/Checkbox.vue
import vList from /components/vlist.vue
import notFound from /views/errors/404.vue//创建路由器
const router createRouter({history:createWebHistory(),routes:[{path:/,component:Home},{path:/about,component:About},{path:/login,component:Login},{path:/checkbox,component:CheckboxVue},{path:/vlist,component:vList},{// 会匹配所有路径path: /:pathMatch(.*)*,component: notFound}]
}) 随便输入个123456路径路由匹配不上就跳转到了404页面
二、通过守卫导航配置404
还有另一种方式守卫导航这种配置方式可能考虑的情况要全面一些不然可能会出现奇怪的问题以后再测试一下。 代码如下示例 router.beforeEach((to, from, next) {if (to.matched.length 0) { //匹配前往的路由不存在from.name ? next({name: from.name}) : next(/errorinfo); //判断此跳转路由的来源路由是否存在存在的情况跳转到来源路由否则跳转到404页面} else {next(); //如果匹配到正确跳转}
}) 总结
一个精心设计的404页面不仅能够以优雅的方式通知用户页面不存在还能够提供帮助、导航回主页或其他相关页面的选项从而减少用户流失提高用户体验。 “成功不是偶然而是由一系列努力和坚持组成。” ——科林·鲍威尔
