VUE 当路由访问路径不匹配默认跳转 404 页面

默认跳转 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(.*)' 代表啥？

1. `/:catchAll(.*)` 是一个 Vue Router 路由配置中的路径表达式，它使用了“通配符参数”语法，用于匹配所有未匹配到其他路由的路径。
2. 具体来说，`/:catchAll(.*)` 中的 `:catchAll` 是一个动态路径参数，它使用了冒号 `:` 前缀，表示它可以匹配任何路径片段。而 `(.*)` 则是一个正则表达式，用于匹配零个或多个任意字符，包括斜杠。
3. 因此，`/:catchAll(.*)` 可以匹配任何路径，包括带有多层路径的路径，例如 `/foo/bar/baz`、`/foo/bar/baz/qux` 等等。
4. 当 Vue Router 匹配到 `/:catchAll(.*)` 路由时，它会将路径作为参数传递给组件，以便组件可以根据实际情况进行处理。在实际应用中，通常会将 `/:catchAll(.*)` 路由用于实现 404 页面或者动态路由的功能。
5. 需要注意的是，`/: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);
  }
}