@Miki8887
Front-end разработчик

Почему меняется маршрут при открытии модального окна?

В чём может быть причина того, что при открытии модального окна из дочернего компонента маршрут сбрасывается на корневой и как это исправить?
Например, у меня есть заказы, проваливаясь в заказ видим позиции товаров, которые в цикле сделаны. Маршрут примерно такой: "\заказ\номер_заказа". В компоненте товара есть модальное окно-увеличение картинки, нажимая на него, маршрут сбивается. Модальное окно используется из b-modal из bootstrap-vue.

Файл заказа:
<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>

Код компонента позиции товара:
<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>

Файл с маршрутами:
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,
    },
  ],

Маршрут до открытия модального окна:
5c19dee3384bf180649419.png

После:
5c19deef8669d380091917.png
  • Вопрос задан
  • 145 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
есть модальное окно-увеличение картинки, нажимая на него, маршрут сбивается

Это вы про

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

??

Попробуйте при клике блокировать действие по умолчанию: @click.prevent.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы