路由404页面配置方法

Tue, 04 Mar 2025 07:00:27 +0000

考察点分析

该题目主要考察以下核心能力维度：

具体评估点：

Vue Router使用routes数组的顺序进行路由匹配，遵循先到先得原则。当使用通配符路由时：

'*'是Vue Router 3的遗留语法，匹配任意路径但不捕获路径片段
'/:pathMatch(.*)*'是Vue Router 4推荐写法，使用正则表达式：
- .*匹配任意字符（含斜杠）
- 尾部*使参数成为数组，保留嵌套路由匹配结果

在Vue Router中配置404页面的实现方法：

 const routes = [
 // 其他路由...
 {
 path: '/:pathMatch(.*)*',
 component: NotFound
 }
]

两种通配符写法区别：

'*'（Vue Router 3风格）：
- 直接匹配所有路径
- 无法获取详细路径参数
- 不支持嵌套路由匹配
'/:pathMatch(.*)*'（Vue Router 4推荐）：
- 通过正则表达式精确匹配
- 保留完整路径参数（通过$route.params.pathMatch获取）
- 支持嵌套路由场景

路由顺序要求原理：
路由匹配遵循顺序优先原则。若将通配符路由前置，会优先捕获所有请求导致正常路由失效。放置在末尾可确保先尝试匹配有效路由，最后处理未匹配情况。