Quasar/Vue.js基础路由配置异常求助：新增路由不生效

问题原因 #

1. 所有路径都渲染Home组件：

   • 你给caisse路由的path加了末尾斜杠/，导致只有访问/caisse/（带斜杠）才会触发该路由，访问/caisse时会自动匹配到子路由里的空路径（path: ''）也就是Home组件。
   • 根路由path: '/'会匹配所有以/开头的路径，只要子路由里找不到对应匹配项，就会默认渲染空路径的Home组件，所以不管输入什么路径，都会显示Home。

2. ErrorNotFound页面不生效：
   根路由的匹配优先级比404路由高，所有路径都被根路由先捕获了，404路由根本没机会触发。

修复后的路由代码 #

import { RouteRecordRaw } from 'vue-router';

const routes: RouteRecordRaw[] = [
  // 根路径直接重定向到首页
  {
    path: '/',
    redirect: '/home'
  },
  // 主布局路由，只匹配/app开头的路径
  {
    path: '/app',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      {
        path: '/home',
        component: () => import('pages/Home.vue')
      },
      {
        path: 'caisse', // 去掉末尾的斜杠
        children: [
          {
            path: '', // 匹配/app/caisse
            component: () => import('pages/CaisseListe.vue')
          },
          {
            path: ':id', // 匹配/app/caisse/123这类带ID的路径
            component: () => import('pages/CaisseDetail.vue')
          }
        ]
      }
    ]
  },

  // 404路由，必须放在最后
  {
    path: '/:catchAll(.*)*',
    component: () => import('pages/ErrorNotFound.vue'),
  },
];

export default routes;

另一种贴近初始写法的修复方案 #

如果不想改主布局的路径前缀，也可以调整子路由匹配逻辑，去掉默认空路径的Home路由，把首页路径设为/home：

import { RouteRecordRaw } from 'vue-router';

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      {
        path: 'home', // 首页路径改为/home
        component: () => import('pages/Home.vue')
      },
      {
        path: 'caisse', // 去掉末尾斜杠
        children: [
          {
            path: '',
            component: () => import('pages/CaisseListe.vue')
          },
          {
            path: ':id',
            component: () => import('pages/CaisseDetail.vue')
          }
        ]
      }
    ]
  },
  // 根路径重定向到首页
  {
    path: '/',
    redirect: '/home'
  },
  // 404路由
  {
    path: '/:catchAll(.*)*',
    component: () => import('pages/ErrorNotFound.vue'),
  },
];

export default routes;

这样访问/home显示首页，/caisse显示列表，/caisse/123显示详情，访问不存在的路径比如/abc就会触发404页面。

内容的提问来源于stack exchange，提问作者Gaetan L.