Nuxt JavaScript перехватывает переход - ошибка? - PullRequest
Новая
       23

Nuxt JavaScript перехватывает переход - ошибка?

0 голосов
/ 26 февраля 2019

Я думаю, что в Nuxt 2.4.x при переходе есть ошибка.

Пример в шаблоне: 

<transition
    appear //---> this never work
    v-on:before-enter="beforeEnter"
    v-on:enter="enter"
    v-on:after-enter="afterEnter"

    v-on:leave="leave">
   ....
  </transition>

В скрипте: 

   transition: {
    mode: 'out-in',
    css: false,
    beforeEnter (el) {
      console.log('before in transition object') // works
    },
    enter (el, done) {
      console.log('enter in transition object') // works
    },
    afterEnter (el) {
      console.log('after enter in transition object') // works
    },
    leave (el, done) {
      console.log('leave in transition object') // works
      done()
    }
  },

  methods: {
    // https://nuxtjs.org/api/pages-transition
    // https://vuejs.org/v2/guide/transitions.html#JavaScript-Hooks
    beforeEnter (el) {
      console.log('before in methods object') // never executed
    },
    enter (el, done) {
      console.log('enter in methods object') // never executed
    },
    afterEnter (el) {
      console.log('after enter in transition object') // never executed
    },
    leave (el, done) {
      console.log('leave in methods object') // never executed
    },
  }

Есливы удаляете все методы в methods object, вы получаете следующие ошибки:

commons.app.js: 9837 [Vue warn]: свойство или метод beforeEnter имеет значениене определено в экземпляре, но на него ссылаются во время визуализации.Убедитесь, что это свойство является реактивным, либо в параметре данных, либо для компонентов на основе классов, инициализируя свойство.См .: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

найдено в

---> на страницах / about.vue в layouts / default.vue commons.app.js: 9837 [Vue warn]: свойство или метод«enter» не определено в экземпляре, но на него ссылаются во время рендеринга.Убедитесь, что это свойство является реактивным, либо в параметре данных, либо для компонентов на основе классов, инициализируя свойство.См .: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

, найденный в

---> на страницах / about.vue, в layout / default.vue

и т. Д. ...

Есть идеи?

1 Ответ

0 голосов
/ 22 мая 2019

Согласно предоставленной вами информации, я хотел бы, чтобы вы обратили внимание на несколько моментов.

Если вы обратитесь к пустой документации здесь , вы заметите, что свойство переходабудет контролировать поведение компонента страницы при перемещении между страницами.То есть каждый раз, когда вы переходите от одного маршрута к другому.

Методы, которые вы определяете внутри компонента, - это функции, которые ваш компонент перехода будет вызывать, когда происходит такой переход, как указано в документации vue здесь .Вот почему вы получаете эту ошибку

Теперь я думаю, что ваш переход не работает, потому что вы не назвали его, ye.Это даст вам больше контроля над тем, что делает ваш переход.Вам также нужно добавить некоторые CSS, чтобы сделать переход эффективным.

enter image description here

Если вы посмотрите на диаграмму выше, вы увидите, как идут чистые переходы CSSиз одного состояния в другое.

Я бы также отослал вас к этой удивительной статье Сары Драснер , в которой говорится о переходах страниц

...