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

在Vue项目中,可以通过在路由配置中添加一个通配符路由来实现404页面。具体做法是在路由配置文件末尾添加一个`path:/:catchAll(*)`的路由,指向一个名为NotFound的组件,这样所有未匹配的路径都会重定向到404错误页面。
摘要由CSDN通过智能技术生成

默认跳转 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);
  }
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值