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

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

Здравствуйте! Подскажите, пожалуйста, в чём может быть причина того, что при открытии модального окна из дочернего компонента маршрут сбрасывается на корневой и как это исправить.
Например, у меня есть заказы, проваливаясь в заказ видим позиции товаров, которые в цикле сделаны. Маршрут примерно такой: "\заказ\номер_заказа". В компоненте товара есть модальное окно-увеличение картинки, нажимая на него, маршрут сбивается. Модальное окно используется из 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
  • Вопрос задан
  • 102 просмотра
Решения вопроса 1
0xD34F
@0xD34F
есть модальное окно-увеличение картинки, нажимая на него, маршрут сбивается

Это вы про

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

??

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

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

Войти через TM ID
Похожие вопросы
Ingram Micro Cloud Москва
от 170 000 руб.
//stablecode Вена
от 110 000 до 140 000 руб.
IT Company Санкт-Петербург
от 120 000 до 200 000 руб.
22 янв. 2019, в 00:48
60 руб./за 1000 зн.
22 янв. 2019, в 00:09
120000 руб./в месяц
21 янв. 2019, в 23:37
1000 руб./за проект