Why does the route change when opening a modal window in Vue?

Question

JavaScript

Hello! Tell me, please, what could be the reason that when opening a modal window from a child component, the route is reset to the root one and how to fix it.
For example, I have orders, falling into the order, we see the positions of the goods that are made in the cycle. The route is something like this: "\order\order_number". The product component has a modal window that enlarges the image, by clicking on it, the route gets lost. The modal window is used from b-modal from bootstrap-vue.
Order file:

<template>
   <item
      v-for="item in orderElements"
      :key="item.id"
      :item="item"
      :order-id="order.id"
      :status="checkStatus"
    />
</template>
<script>
export default {
    name: 'OrderItems',
    components: {
      Item
    },
}
</script>

Product position component code:

<template>
<a
     :id="item.id"
     v-b-modal="'img-'+item.id"
     href="#"
>
  <img :src="item.element.image"  height="80px">
 </a>
   <b-modal
      :id="'img-'+item.id"
      ref="modalChangeItem"
      centered
      :title="item.name"
      hide-footer
    >
      <div class="mx-auto d-table">
        <img :src="item.element.image">
      </div>
    </b-modal>
</template>

Route file:

export default new Router({
  routes: [
    {
      path: '/order-items/:orderId',
      name: 'OrderItems',
      component: OrderItems,
      props: (route) => ({ orderId: Number(route.params.orderId), orderData: route.params.order }),
      beforeEnter: ifAuthenticated,
    },
  ],

Before opening the modal window, the route is as follows:

After:

Answer 1

there is a modal window - increase the image, clicking on it, the route goes astray

It's you about

<a
     :id="item.id"
     v-b-modal="'img-'+item.id"
     href="#"
>

??
Try blocking the default action on click: @click.prevent.