Why does vue router work crookedly?

Question

Vue.js

Good day to all!
After I added optional parameters to the routes, the view stopped going to these routes by url (with navigation to this.$router.push(...)and everything is in order) Now when I try to go (using the address bar) to (i.e. orders.order) everything is in order , the component from (Order) is rendered, although it should be an EditOrder, with the same as with . BUT: If you enter or (with an optional parameter) in the url, everything works fine and the necessary pages are displayed.<router-link>
/orders/123/orders/123/edit/orders/123/orders/123/copy/orders/123/edit
/orders/123/название_магазина/edit/orders/123/название_магазина/copy

a piece of router.js with the definition of routes

{
      path: '/orders',
      components: {
        default: ChildView
      },
      children: [

        // ......

        {
          name: 'orders.order',
          path: ':orderId/:shop?',
          components: { default: Order },
          meta: { title: 'Просмотр заказа' }
        },
        {
          name: 'orders.order.edit',
          path: ':orderId/:shop?/edit',
          components: { default: EditOrder },
          meta: { title: 'Редактировать заказ', needAcceptQuit: true }
        },
        {
          name: 'orders.order.copy',
          path: ':orderId/:shop?/copy',
          components: { default: CopyOrder },
          meta: { title: 'Копировать заказ', needAcceptQuit: true }
        }
      ]
    },

Tried to do

another piece of router.js

{
          path: ':orderId/:shop?',
          components: {
            default: ChildView
          },
          children: [
            {
              name: 'orders.order',
              path: '',
              components: { default: Order },
              meta: { title: 'Просмотр заказа' }
            },
            {
              name: 'orders.order.edit',
              path: 'edit',
              components: { default: EditOrder },
              meta: { title: 'Редактировать заказ', needAcceptQuit: true }
            },
            {
              name: 'orders.order.copy',
              path: 'copy',
              components: { default: CopyOrder },
              meta: { title: 'Копировать заказ', needAcceptQuit: true }
            }
          ]
        }

, but, as expected, this did not give anything but unnecessary nesting of components.
How can this be overcome?

Answer 1

Well, everything is correct, your url /orders/123/edit hits the mask :orderId/:shop? so it always renders the same. Try this route in the last definition in the children array, after edit and copy