带数据提取的动画路由切换，Vue

Question

我正在使用Vue、Vuex和Vue路由器。有一个路由器链接元素列表。单击时，路由器视图区域中的组件应切换为动画，并且路由url应更改。换句话说，旧组件应该完全消失，然后向服务器请求新组件的数据，然后新组件顺利出现。但事实并非如此。单击路由器链接后，新路由的数据将快速加载，新组件将平滑消失，然后平滑显示。

一个新组件消失了，我做错了什么？我在beforeRouteEnter和beforeRouteUpdate挂钩中请求数据。

教训ist.vue

<template>
  <section>
    <ul>
      <router-link 
          v-for="(lesson,index) in lessons"
          v-bind:key="index"
          :to="{
             name: 'lesson',
             params: {
               id: index+1
             }
           }"
           tag="li"
      >
        <h2>№{{index+1}}</h2>
      </router-link>
    </ul>
    <transition name="slide" mode="out-in" appear>
            <router-view :key="$route.path"></router-view>
    </transition>
  </section>

课程vue

import {store} from '../../vuex/store'
    
beforeRouteEnter(to, from, next) {
  let sendData = {};
  sendData.lessonNumber = Number(to.params.id);
  sendData.userId = store.getters['login/userId'];
  store.dispatch('lesson/changeCurrentLesson', sendData).then(()=> next());
  //dispatch action to vuex for data fetching
},
beforeRouteUpdate(to, from, next){
  let sendData = {};
  sendData.lessonNumber = Number(to.params.id);
  sendData.userId = store.getters['login/userId'];
  store.dispatch('lesson/changeCurrentLesson', sendData).then(()=> next());
}

Answer 1

单击路由器链接后，新路由的数据将快速加载，新组件将平滑消失，然后平滑显示。

我猜这是因为您使用的是单一状态，当您导航到新路由（相同路由不同参数）时，我们调用currentLesson，然后beforeRouteUpdate将在旧组件上触发，然后更新currentLesson，这样您将看到新组件似乎消失了。然后，真正的新组件将以相同的currentLesson显示。

示例

因此，您可以通过使用带有自己的键或数字的教训对象来解决这个问题。或者，您可以使用创建的钩子或挂载的钩子，我认为如果您需要在加载API之前显示一些内容，这会更好。

示例