When a path occurs twice in the routes array

I stumbled across a CodePen where the same path was included twice in the routes array: once at the root level and once as a child to another path. Both the routes assignment and CodePen link are below. The path in question is: “/user/:userId”

I am new to Vue, and this confused me greatly. What is the ascribed behavior when Vue Router faces such a scenario? I’d much appreciate any insight into what this is about, as I am trying to solidify my understanding of Vue Router, and this has thrown me several steps backwards!

const routes = [
  {
    path: "/user",
    name: "userList",
    component: UserList,
  },

  // use /named as the parent route to wrap our two named views:
  {
    path: "/named",
    name: "named",
    component: NamedWrapper,
    children: [
      {
        path: "/user/:userId",
        name: "named_id",
        components: { user_details: User, sidebar: Sidebar },
        props: { user_details: true, sidebar: false },
      },
    ],
  },
  {
    path: "/user/:userId",
    name: "user",
    component: User,
    props: true,
  },
];

CodePen: https://codepen.io/patrickodacre/pen/zxwWPO