vue-router配置path为空时的坑

当 vue-router 配置 path 为空时页面无法访问

当 vue-router 为如下配置时，默认 path（配置成’’）的页面会无法访问：

return [
  {
    path: "/a",
    children: [
      {
        path: "/b",
      },
    ],
  },
  {
    path: "/a",
    children: [
      {
        path: "",
      },
      {
        path: "/c",
      },
    ],
  },
];

当同级存在两个及以上同样的路由配置时，在第二个及以后配置默认路由，即 path: ''无法生效。

此时把默认配置防止到第一个路由是可以生效的：

return [
  {
    path: "/a",
    children: [
      {
        path: "",
      },
      {
        path: "/b",
      },
    ],
  },
  {
    path: "/a",
    children: [
      {
        path: "/c",
      },
    ],
  },
];

同样的把两个合并成一个路由配置也可以生效，而且和顺序无关：

return [
  {
    path: "/a",
    children: [
      {
        path: "/b",
      },
      {
        path: "", // 默认路由放在哪里都可以生效
      },
      {
        path: "/c",
      },
    ],
  },
];

猜想应该是和 vue-router 的匹配规则有关，其行为和我们习惯思维里的路由匹配规则不太一样，值得注意，尽量避免配置重复的路由。