在 Vue3/Nuxt3 中根据 Vue3/Nuxt3 中的上一页更改动画-解网

问：

我目前正在研究向 Nuxt3/Vue3 应用程序的主页添加过渡。我正在为它使用标签：<Transition>

<template>
  <Transition name="slide-left" mode="out-in">
    ...
  </Transition>
</template>

我想根据我来自的页面使用不同的过渡，例如，如果我来自“画廊”，过渡名称应该是“左滑”，但如果我来自“介绍”，它应该是“溶解”。我怎样才能做到这一点？

前端 nuxtjs3

我找到了一种方法来做到这一点，尽管不可否认，它似乎比它应该的要复杂得多。我也不使用 Nuxt，尽管无论哪种方式，这都可能不会影响答案，如果有的话，更少 import 语句。无论如何，主要障碍是弄清楚以前的路线是什么，因为两者都不包含此信息。我们必须使用 Vue Router 的导航守卫之一，它具有包含我们需要的信息的参数，即 beforeRouteEnter 守卫。useRouteuseRouterfrom

另一个问题是将这些信息传递给组件，因为这个导航保护在创建组件之前执行，我最好的想法是使用一个非常简单的可组合项（或者存储可以工作），Vue Router guard 可以写入并且组件可以从中读取。（旁注：我尝试了使用 BeforeRouteEnter 的下一个参数在 vm 上设置局部变量的方法，虽然我可以设置变量，但这样做时我无法影响过渡动画。可能是防护罩和组件安装的时序问题）

可组合项：prevRoute.js

import { ref } from "vue";

const prevRoute = ref();

export default prevRoute;

组件（BeforeRouteEnter 仅适用于 Options API）<script>

<script>
export default {
  beforeRouteEnter(_, from) {
    prevRoute.value = from
  }
}
</script>

其余部分后跟常规组合 API<script setup>

<script setup>
import { ref } from 'vue'
import prevRoute from '../composables/prevRoute'

const transition = ref('')
if (prevRoute.value) {
  if (prevRoute.value.name === 'someRouteName') {
    transition.value = 'bounce'
  } else {
    transition.value = 'slide-fade'
  }
}
</script>

示例代码沙盒 -- 导航到 Page1 或 Page2，然后导航回去查看基于 - 的转换。from

上一个：在 vue3 插件中访问$vuetify

下一个：Pinia 组合 API “this”类型问题

在 Vue3/Nuxt3 中根据 Vue3/Nuxt3 中的上一页更改动画

Change animation based on previous page in Vue3/Nuxt3

评论