路由404页面配置方法

考察点分析 link

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

1. 路由配置能力：是否掌握Vue Router基础配置及错误处理机制
2. 动态路由理解：对路径匹配语法及正则表达式的应用能力
3. 路由匹配机制：对路由优先级和匹配顺序的深入理解

具体评估点：

• 通配符路由的两种实现方式及适用场景
• 路由匹配优先级规则
• 动态参数捕获原理
• 路由配置顺序的重要性

技术解析 link

关键知识点 link

1. 路由匹配顺序
2. Vue Router路径匹配语法
3. 通配符路由实现原理

原理剖析 link

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

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

常见误区 link

1. 将404路由放在非末位导致正常路由无法匹配
2. 混淆Vue Router版本差异导致参数获取失败
3. 未正确处理动态路由优先级（如将/user/:id放在通配符路由之后）

问题解答 link

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

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

两种通配符写法区别：

1. '*'（Vue Router 3风格）：

   • 直接匹配所有路径
   • 无法获取详细路径参数
   • 不支持嵌套路由匹配

2. '/:pathMatch(.*)*'（Vue Router 4推荐）：

   • 通过正则表达式精确匹配
   • 保留完整路径参数（通过$route.params.pathMatch获取）
   • 支持嵌套路由场景

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

解决方案 link

编码示例 link

  import { createRouter } from 'vue-router'

const router = createRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    // 必须置于最后
    { 
      path: '/:pathMatch(.*)*',  // 捕获完整路径
      component: () => import('./views/404.vue'),
      meta: { title: '页面丢失' }
    }
  ]
})

// 404组件内获取路径
export default {
  mounted() {
    console.log(this.$route.params.pathMatch) // 输出未匹配的路径数组
  }
}
  

优化建议 link

1. 服务端配合：配置服务端路由兜底返回index.html
2. 性能优化：使用路由懒加载404组件
3. 用户体验：页面保留导航能力，提供返回首页按钮

深度追问 link

1. 如何处理动态路由的404状态？
   答：在动态路由的beforeEnter守卫中进行API验证，验证失败时重定向到404

2. SPA应用如何避免直接访问不存在的子路由？
   答：需配置服务器路由重定向规则（如Nginx的try_files）

3. 如何自定义404页面的路径参数显示？
   答：通过$route.params.pathMatch获取未匹配路径进行个性化展示