vue如何配置404路由

前言

在我们的项目中怎么进行404notfound页面的配置？

---

首先我们要创建我们的404路由

<template>
  <div>not found</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  setup() {
    return {}
  }
})
</script>

<style lang="less" scoped>
</style>

注册我们的路由,然后重定向我们的404路由，

  {
    name: 'notfound',
    path: '/notfound',
    component: () => import('@/views/not-found/404.vue')
  },
  {
    /**
     * 进行我们的路由匹配，通俗来讲就是比如我们是http://localhost:8080
     * 匹配我们/后面的如果你乱写的话就会重定向我们的404路由
     * 举个例子
     *   { path: '/user-:afterUser(.*)',      redirect: '/notfound},
     * 匹配我们/user后面的内容，如果你乱写的话就会进入404
     */
    path: '/:pathMatch(.*)*',
    redirect: '/notfound'
  }