适用于vue3的vue-router的404配置

老版本(适用于vue2的vue-router)

在所有路由的最后配置

{
    path: '*',
    name: '404',
    component: () => import('@/pages/404')
}

新版本(适用于vue3的vue-router)

{
    path: '/404',
    name: '404',
    component: () => import('@/pages/404')
},
{
    path: '/:pathMatch(.*)',
    redirect: '/404'
}

相对完整的示例

import { RouteRecordRaw } from 'vue-router'
import LoginPage from 'pages/LoginPage.vue'
import BasicLayout from 'layouts/BasicLayout.vue'
import { LOGIN_ROUTE_NAME } from 'utils/SystemConstants'

// 404页面配置
const component404 = import('pages/Page404.vue')
// 根路由404配置
const rootRoutePage404: RouteRecordRaw[] = [
  {
    path: '/404',
    component: () => component404,
  },
  {
    path: '/:pathMatch(.*)',
    redirect: '/404',
  },
]
// index子路由404配置
const indexSubRoute404: RouteRecordRaw[] = [
  {
    path: '404',
    component: () => component404,
  },
  {
    path: '/:pathMatch(index/.*)',
    redirect: '/index/404',
  },
]
const routes: RouteRecordRaw[] = [
  {
    path: '/login',
    name: LOGIN_ROUTE_NAME,
    component: LoginPage,
  },
  {
    path: '/index',
    component: BasicLayout,
    redirect: '/index/home',
    children: [
      {
        path: 'home',
        name: 'HomePage',
        component: () => import('pages/HomePage.vue'),
      },
      {
        path: 'form/json-form',
        name: 'JsonFormPage',
        component: () => import('pages/all-demo/form-demo/JsonFormPage.vue'),
      },
      {
        path: 'form/el-form',
        name: 'ElFormPage',
        component: () => import('pages/all-demo/form-demo/ElFormPage.vue'),
      },
      {
        path: 'form/requirement-el-form',
        name: 'RequirementSimpleDynForm',
        component: () =>
          import('pages/all-demo/form-demo/RequirementSimpleDynFormPage.vue'),
      },
      ...indexSubRoute404,
    ],
  },
  ...rootRoutePage404,
]

export default routes