ArchiTawer
@ArchiTawer
"Ok, Google" и все твои проблемы решены

Почему криво работает vue router?

Доброго времени суток всем!

После того, как добавил опциональные параметры в роуты, вью перестал переходить на эти маршруты по урлу (с навигацией по this.$router.push(...)и <router-link> всё в порядке)

Сейчас при попытке перехода (с помощью адресной строки) на /orders/123 (т.е. orders.order) всё в порядке, на /orders/123/edit рендерится компонент из /orders/123 (Order), хотя должен быть EditOrder, с /orders/123/copy тоже самое, что и с /orders/123/edit .

НО: Если в урле вводить /orders/123/название_магазина/edit или /orders/123/название_магазина/copy (с опциональным параметром), всё работает нормально и отображаются нужные страницы.

кусок router.js с определением маршрутов

{
      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 }
        }
      ]
    },



Пробовал сделать
другой кусок 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 }
            }
          ]
        }
, но, как и ожидалось, ничего кроме лишней вложенности компонентов это не дало.

Как можно побороть это?
  • Вопрос задан
  • 57 просмотров
Решения вопроса 1
potapchino
@potapchino
Ну все правильно, у вас урл /orders/123/edit попадает по маску :orderId/:shop? поэтому и рендерится всегда одно и тоже. Попробуйте этом маршрут в последним определить в массиве children, после edit и copy
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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