默认跳转 404 页面
在 Vue 中,可以通过在路由配置中添加一个“通配符”路由来实现当所有的路由访问路径不匹配时,自动跳转到 404 页面的效果。
具体来说,我们可以在路由配置的末尾添加一个 path: "/:catchAll(.*)"
的路由,该路由会匹配所有未匹配到其他路由的路径,并将其重定向到 404 页面。eg:
./views/NotFound.vue
<template>
<div>
<h1>404 Not Found</h1>
<p>Sorry, the page you requested could not be found.</p>
</div>
</template>
<script>
export default {
name: 'NotFound',
}
</script>
在这个例子中,我们创建了一个名为 NotFound
的组件,它包含了一个简单的错误信息。接下来,在路由配置中,我们可以添加一个通配符路由来显示这个组件:
./router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
import Contact from './views/Contact.vue'
import NotFound from './views/NotFound.vue'
const routes = [
{
path: '/',
name: 'home',
component: Home,
},
{
path: '/about',
name: 'about',
component: About,
},
{
path: '/contact',
name: 'contact',
component: Contact,
},
{
path: '/:catchAll(.*)',
name: 'not-found',
component: NotFound,
},
]
const router = createRouter({
history: createWebHistory(),
routes,
})
在这个路由配置中,我们添加了一个名为 not-found
的路由,它的路径使用了通配符数 /catchAll(.*)
,用于匹配所有未匹配到其他路由的路径。当路由器匹配到这个路由时,它会将请求重定向到 NotFound
组件。
需要注意的是,如果你想要在 404 页面中添加一些自定义的内容或者样式,可以根据实际情况在组件模板中添加更多的 HTML 和 CSS。
'/:catchAll(.*)' 代表啥?
- `/:catchAll(.*)` 是一个 Vue Router 路由配置中的路径表达式,它使用了“通配符参数”语法,用于匹配所有未匹配到其他路由的路径。
- 具体来说,`/:catchAll(.*)` 中的 `:catchAll` 是一个动态路径参数,它使用了冒号 `:` 前缀,表示它可以匹配任何路径片段。而 `(.*)` 则是一个正则表达式,用于匹配零个或多个任意字符,包括斜杠。
- 因此,`/:catchAll(.*)` 可以匹配任何路径,包括带有多层路径的路径,例如 `/foo/bar/baz`、`/foo/bar/baz/qux` 等等。
- 当 Vue Router 匹配到 `/:catchAll(.*)` 路由时,它会将路径作为参数传递给组件,以便组件可以根据实际情况进行处理。在实际应用中,通常会将 `/:catchAll(.*)` 路由用于实现 404 页面或者动态路由的功能。
- 需要注意的是,`/:catchAll(.*)` 应该放在路由配置的末尾,以确保它不会影响其他路由的匹配。同时,在某些情况下,可能需要使用其他路径表达式来更精确地匹配路径,例如 `/user/:id`、`/product/:slug` 等等。
<div className="zz-404">
<div className="zz-404-overlay"/>
<div className="zz-404-content">
<div className="zz-404-font">404</div>
<p>.....</p>
<button onClick={() => { ... }}>走你</button>
</div>
</div>
</div>
.zz-404 {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
text-align: center;
color: #ffffff;
background-size: cover;
flex-direction: column;
background-image: url('@images/404.png');
.zz-404-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgb(0 0 0 / 60%);
}
.zz-404-content {
animation: fadeinfof 1s forwards;
z-index: 10;
}
.zz-404-font {
font-size: 80px;
}
p {
margin-bottom: 48px;
font-size: 28px;
letter-spacing: 4px;
}
button {
padding: 8px 16px;
font-size: 18px;
border: 1px solid #ffffff;
border-radius: 5px;
background: transparent;
transition: all 0.3s;
&::before {
display: inline-block;
margin-right: 16px;
font-family: iconfont;
content: '\e639';
}
&:hover {
border: none;
color: #e14eca;
transform: translateX(-5px);
}
}
}
@keyframes fadeinfof {
from {
opacity: 0.8;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}