Vue&Nuxt场景下仅从page A跳转page B时展示加载动画的问题咨询

核心逻辑是控制加载动画的触发条件，仅在从Page A跳转进入Page B时才激活加载状态，有两种可落地的实现方案： #

方案1：基于路由来源判断（无额外依赖，最简洁） #

利用Nuxt路由跳转时暴露的from参数直接判断上一个路由是否为Page A，不需要引入全局状态，逻辑全部收敛在Page B内部：

<template>
  <div>
    <div v-if="isLoading">
      <!-- 放入Page C加载动画的代码 -->
    </div>
    <div v-else>
      <!-- Page B的业务内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  // asyncData可以直接解构获取当前和上一个路由信息
  async asyncData({ from }) {
    // 此处根据你的路由配置，匹配Page A的name或path即可
    const isFromPageA = from?.name === 'page-a' || from?.path === '/page-a'
    let isLoading = false

    if (isFromPageA) {
      isLoading = true
      // 执行原有的异步逻辑，比如axios请求、数据处理
      await new Promise(resolve => setTimeout(resolve, 1500)) // 模拟异步请求
      // 异步逻辑执行完成后关闭加载状态
      isLoading = false
    }

    return {
      isLoading
      // 其他异步获取的业务数据也在此处返回
    }
  }
}
</script>

方案2：基于全局状态控制（适配复杂跳转场景） #

如果路由跳转存在中间件重定向、路由守卫中转等场景，from参数无法直接识别到原始来源为Page A时，可以用Pinia/Vuex存储触发状态：

1. 首先在全局状态中新增加载控制字段

// store/app.js （Pinia示例）
import { defineStore } from 'pinia'

export const useAppStore = defineStore('app', {
  state: () => ({
    triggerPageBLoading: false
  }),
  actions: {
    setTriggerPageBLoading(val) {
      this.triggerPageBLoading = val
    }
  }
})

2. 在Page A的跳转逻辑中修改全局状态

// Page A 跳转至Page B的触发方法
import { useAppStore } from '~/store/app'

const appStore = useAppStore()
function navigateToPageB() {
  // 跳转前先标记需要显示Page B的加载动画
  appStore.setTriggerPageBLoading(true)
  this.$router.push('/page-b')
}

3. 在Page B中读取状态控制加载逻辑

<script>
import { useAppStore } from '~/store/app'

export default {
  async asyncData() {
    const appStore = useAppStore()
    let isLoading = appStore.triggerPageBLoading

    if (isLoading) {
      // 执行异步逻辑
      // 你的业务异步请求
      isLoading = false
      // 重置状态，避免后续跳转重复触发
      appStore.setTriggerPageBLoading(false)
    }

    return {
      isLoading
    }
  }
}
</script>

注意事项 #

• 不要在组件data中写死isLoading: true，避免所有场景进入Page B都默认触发加载
• 异步逻辑执行完成后务必重置加载状态和全局标记，避免后续跳转逻辑异常

内容的提问来源于stack exchange，提问作者HJ Kim