Vue динамический переход по маршруту (на основе от / до) не применяется - PullRequest
Новая
       11

Vue динамический переход по маршруту (на основе от / до) не применяется

0 голосов
/ 17 сентября 2018

У меня проблемы с реализацией определенного перехода страницы.

В моем приложении нейтральное состояние (маршруты не активированы). У меня есть два маршрута, ведущих к (одному и тому же) компоненту Page, отображающему контент на основе реквизитов маршрута.

Я хочу, чтобы переход из нейтрального состояния на страницу (или наоборот) изменил непрозрачность (появление / исчезновение). Со страницы на страницу она должна скользить слева направо.

Я наблюдаю $ route для достижения этой цели, как описано в документации (https://router.vuejs.org/guide/advanced/transitions.html#route-based-dynamic-transition).

Пожалуйста, посмотрите на мой пример: https://codesandbox.io/s/n06mojkv7j

Нажав «А» или «В», вы попадете на соответствующую страницу. Нажатие «Х» возвращает вас в нейтральное состояние.

Итак, в нейтральном состоянии нажатие «A» изменяет непрозрачность с 0 до 1. Нажатие «X» изменяет непрозрачность с 1 до 0. Пока все хорошо.

Когда страница A активна, нажатие кнопки «B» перемещает страницы по горизонтали. Также как и предполагалось.

Однако, когда вы пришли из нейтрального положения, щелкнув A, затем B (все переходы были выполнены так, как задумано), нажав «X», где все идет не так. Вы увидите, что страница скользит по горизонтали, а непрозрачность увеличивается от 1 до 0 (которая предназначена для перехода из нейтрального состояния или перехода в нейтральное).

Условия в $ route watcher были выполнены, имя transitionName фактически изменяется на 'opacity' (как вы также можете видеть в выводе консоли). Но применяется неправильный переход.

Я надеюсь, что вы, ребята, сможете дать мне какое-либо представление о проблеме :) Спасибо!

1 Ответ

0 голосов
/ 17 сентября 2018

Добавляет конфигурацию для route.path = '/', как показано ниже, затем исправит проблему, с которой вы столкнулись.

Или вы можете посмотреть одну рабочую демонстрацию на CodeSandBox

Демо: 

const routes = [
  {
    name: "/",
    path: "/",
    component: {template:'<div/>'}
  },
  {
    name: "A",
    path: "/a",
    component: Page,
    props: { text: "A" }
  },
  {
    name: "B",
    path: "/B",
    component: Page,
    props: { text: "B" }
  }
]
...