2

我正在寻找一种解决方案，以在 Nuxt 项目的页面转换期间在<nuxt/>元素外部的组件/元素上添加和删除类。layouts/default.vue

例如，我想div在每次页面转换之前为进出动画制作动画。伪代码如下：

<!-- layouts/default.vue -->

<template>
  <site-curtain :class="{ 'is-active': isTransitioning == true }" /> // I would to apply this class during a page transition
  <nuxt />
</template>

Nuxt 中是否有一种明显的方法可以收听我缺少的页面转换？我看过 vue-router 的beforeRouteUpdate导航守卫，但不确定它是否合适？

任何帮助将不胜感激！

4

1 回答 1

0

试试这个（我在我的一个项目中使用了这种方法并且效果很好）：

首先我定义了一个mixin如下：

mixin/transition.js：

export default {
  beforeEnter() {
    this.$emit('transition', true);
  },
  afterEnter() {
    this.$emit('transition', false);
  },
}

然后在我想使用效果的每个页面中导入它：

pages/about-us.vue

import transition from '@/mixin/transition';

export default {
  mixins: [transition],
  ...
}

然后在布局页面中，我可以监听transition转换完成前后发出的事件，并获取随事件发送的有效负载：

<template>
  <site-curtaion :class="{ 'is-active': isTransition }" />
  <nuxt @transition="isTransition = $event" />
</template>

这是data布局组件的对象：

data() {
  return {
    isTransition: false,
  };
}

这是我用来组合此解决方案的资源：

Nuxt 过渡属性

Vue 的 javascript 转换钩子

于 2022-01-11T06:22:58.953 回答