在 Vue Router 中配置 404页面(即匹配所有未定义路由的页面)主要通过通配符路由实现。

具体配置方法如下:

创建 404 页面组件

首先需要创建一个 404 页面组件，通常文件命名为 NotFound.vue

通常代码：

<template>

<diy class="not-found">

<h1>494</h1>

<p>页面不存在</p>

<router-link to="/">返回首页</router-link>

</div>

</template>

在路由配置中添加通配符路由

在 Vue Router 的路由配置中，添加一个通配符路由作为最后一个路由规则:

import { createRouter,createWebHistory } from 'vue-router'

import NotFound from "@/views/NotFound.vue"

const router = createRouter({

history: createWebHistory(),

routes:[

// 其他路由..

{ path: '/', component: Home },

{ path: '/about', component: About },

//404 路由配置-放在最后

{ path: '/:pathmatch(.*)*', name: 'NotFound', component: NotFound }

]

})

关键点是 path:'/:pathmatch(.*)*· 这个路径模式，它会匹配任何未被前面路由规则匹配的路径.

Vue Router 3.x与4.x的区别

在 Vue Router 3.x(用于 Vue 2)中，通配符路由的配置方式略有不同:

// Vue Router 3.x(Vue 2)

const router =new VueRouter({

routes:[

//其他路由...

{ path: '*', name: 'NotFound', component: NotFound }

]

})

而在 Vue Router 4.x(用于 Vue 3)中，使用的是参数化的通配符：

// Vue Router 4.x(Vue 3)

const router = createRouter({

// ...

routes:[

{ path: '/:pathmatch(.*)*', name: 'NotFound', component: NotFound }

]

})

通配符路由的高级用法

通配符路由还可以捕获未匹配的路径，并在组件中使用:

{ path: '/:pathmatch(.*)*', name: 'NotFound', component: NotFound }

在组件中可以通过$route.params.pathMatch 访问未匹配的路径部分:

<template>

<div>

<h1>页面不存在</h1>

<p>您访问的路径"{{ $route.params.pathMatch }}"不存在</p>

</div>

</template>

重定向到 404 页面的方式

除了直接使用通配符路由外，还可以使用重定向：

const router = createRouter({

// ...

routes:[

// 命名的 404 路由

{ path:'/404', name: 'NotFound', component: NotFound }

// 将所有未匹配的路由重定向到 404

{ path: '/:pathmatch(.*)*', redirect: {name: 'NotFound'} }

]

})

这种方式的好处是可以保持 URL的整洁(显示为 /404 而不是原始的未匹配路径)

动态导入 404 组件

为了优化性能，可以使用动态导入(懒加载)404 页面组件:

const router = createRouter({

// ...

routes:[

{

path: '/:pathmatch(.*)*',

name: 'NotFound',

component:()=>import('@/views/NotFound.vue')

}

]

})

路由守卫中处理 404

有时候我们需要在路由守卫中动态判断页面是否存在，例如基于后端 API的响应:

router.beforeEach(async (to，from，next)=>{

// 检查页面是否存在的逻辑

if(to.name !=='NotFound'){

try {

const pageExists =await checkIfPageExists(to.path)

if(!pageExists){

next({ name: 'NotFound' })

return

}

} catch (error) {

console.error(error)

}

}

next()

})

自定义错误页面

除了 404 页面，你还可以设置其他错误状态的页面，如 403(禁止访问)、500(服务器错误)等:

const router = createRouter({

history: createWebHistory(),

routes:[

// 其他路由...

// 403 页面

{ path: '/403', name: "Forbidden', component: () => import('@/views/Forbidden.vue') },

// 404 页面

{ path: '/404', name: 'NotFound', component: () => import('@/views/NotFound.vue') },

// 500 面

{ path: '/500'，name: 'ServerError', component: () => import('@/views/ServerError.vue') },

// 通配符路由

{ path: '/:pathMatch(.*)*', redirect: { name:'NotFound' } }

]

})

Vue Router 官方文档地址:

路由匹配语法:
https://router.vuejs.org/zh/guide/essentials/route-matching-syntax.html

路由配置:
https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html