Vue-Router实现捕获所有路由：保留原URL并显示内嵌404页面

可以同时实现这两个需求，核心是不要用redirect重定向，而是直接通过路由匹配渲染对应的组件结构，这样就能保留用户输入的原始URL，同时显示内嵌的404页面。

先修正你原来路由结构里的小问题：你把/subpage作为根路由的子路由时用了绝对路径（带/），这会让它脱离父路由的层级，应该改成相对路径subpage。

调整后的路由代码如下：

const routes = [
  { 
    path: '/', 
    redirect: '/subpage' // 根路径重定向到主页面
  },
  {
    path: '/subpage',
    component: () => import('SubPage.vue'),
    children: [
      // 这里放/subpage下的有效子路由，比如：
      // { path: 'home', component: () => import('Home.vue') },
      // { path: 'settings', component: () => import('Settings.vue') },
      // 匹配/subpage下所有无效子路径
      { 
        path: ':pathMatch(.*)*', 
        name: '404',
        component: () => import('NotFound.vue')
      }
    ]
  },
  // 匹配所有非/subpage开头的无效路径
  {
    path: '/:pathMatch(.*)*',
    component: () => import('SubPage.vue'),
    children: [
      {
        path: '',
        component: () => import('NotFound.vue')
      }
    ]
  }
];

这个方案的逻辑是：

• 当用户访问/subpage下的无效子路径（比如/subpage/abc123），通配符子路由会直接匹配，URL保持不变，同时SubPage的内嵌区域显示NotFound组件。
• 当用户访问非/subpage开头的无效路径（比如/xyz），顶级通配符路由会渲染SubPage，并在其内嵌区域加载NotFound组件，URL完全保留用户输入的原始地址。

你之前尝试的alias之所以没生效，是因为alias是给已有路由设置替代访问路径，没法实现“任意无效URL都匹配内嵌404”的需求，直接用通配符路由渲染目标组件结构才是正确的思路。

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