Vue路由如何在路由表直接配置404跳转至站外公共页面？

常见的站内404路由配置写法如下：

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

该配置会加载项目内编写的404页面组件。如果需要匹配404路由时直接跳转到站外公共404页面，直接给redirect属性配置站外地址的写法是无法生效的：

{path:'/*', redirect:'站外404页面地址'},

不生效的核心原因是Vue Router的redirect属性默认仅解析站内路由路径，传入外部绝对地址时会被当成内部路由路径匹配，最终无法完成跨站跳转。

无中间组件的纯路由表配置方案 #

不需要额外编写404中转组件，直接利用路由的独享守卫beforeEnter即可在路由匹配阶段直接完成站外跳转，配置如下：

// Vue 2.x 版本写法
{
  path: '/*',
  beforeEnter: () => {
    window.location.href = '你的公共404页面绝对地址'
  }
}

// Vue 3.x + Vue Router 4.x 版本写法（4.x已废弃*通配符，需用参数通配写法）
{
  path: '/:pathMatch(.*)*',
  beforeEnter: () => {
    window.location.href = '你的公共404页面绝对地址'
  }
}

配置说明：

• 该写法不会加载任何Vue组件，匹配到未命中的路由后直接执行原生页面跳转，没有额外的组件挂载开销
• 跳转到外站后会直接离开当前单页应用，不需要在守卫内调用next()方法放行内部路由流程
• 跳转逻辑和组件内写window.location.href的效果完全一致，只是执行时机提前到了解析路由的阶段

内容的提问来源于stack exchange，提问作者Frank R