javascript - Nuxt JavaScript 钩子转换

问题描述

我认为 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 警告]：属性或方法“beforeEnter”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保该属性是反应性的，无论是在数据选项中，还是对于基于类的组件。请参阅： https ://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties 。

在发现

---> 在 pages/about.vue at layouts/default.vue commons.app.js:9837 [Vue 警告]：属性或方法“enter”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保该属性是反应性的，无论是在数据选项中，还是对于基于类的组件。请参阅： https ://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties 。

在发现

---> 在 pages/about.vue 在 layouts/default.vue

等等...

有任何想法吗？

标签： javascriptvue.jsvuejs2transition

根据您提供的信息，我希望您注意一些事项。

如果您参考此处的 nuxt 文档，您会注意到 transition 属性将控制页面组件在页面之间移动时的行为方式。也就是说，每次您从一条路线移动到另一条路线时。

您在组件内部定义的方法是转换组件将在发生此类转换时调用的函数，如此处的 vue 文档中所述。这就是您收到该错误的原因

现在，我认为您的过渡不起作用，因为您还没有命名它。它将让您更好地控制您的过渡正在做什么。您还需要添加一些 css 以使过渡生效。

如果您查看上面的图表，您会发现纯 css 转换是如何从一种状态到另一种状态的。

我还会向您推荐莎拉·德拉斯纳（Sarah Drasner）的这篇关于页面转换的精彩文章

javascript - Nuxt JavaScript 钩子转换 - 一个错误？

问题描述

解决方案

推荐阅读