title: Mapping multiple URLs to the same component with Vue Router
body: <p>In my Vue 2.7.5 app (using Vue Router 3.5.4). I'm trying to map multiple URLs to the same component. Currently, I have a single route mapped to the component:</p>
  <pre class="lang-js prettyprint-override"><code>{
    path: '/customer/:customerId',
    component: CustomerOrders
  }
  </code></pre>
  <p>My goal is to add an optional <code>orderId</code> parameter, such that if a URL like <code>/customer/42/order/59</code> is accessed, then the same component is loaded, but the order with ID 59 is highlighted (the details of how the param is going to highlight the order are not important).</p>
  <p>I tried changing the path to <code>/customer/:customerId/orders/:orderId?</code>, but this would no longer match any URLs of the form <code>/customer/:customerId</code> and would therefore be a breaking change.</p>
  <p>My current solution is to use a child route:</p>
  <pre class="lang-js prettyprint-override"><code>{
   path: '/customer/:customerId',
   component: CustomerOrders,
   children: [
     {
       path: 'order/:orderId',
       component: CustomerOrders
     }
    ]
  }
  </code></pre>
  <p>This work as the <code>CustomerOrders</code> component is loaded by paths matching either <code>/customer/:customerId</code> or <code>/customer/:customerId/order/:orderId</code>, but it seems like a slightly convoluted approach and I'm not sure it's an appropriate use of child routes.
  Is there a better solution?</p>