首先，我在组件中是这么写的

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2 @click="go('EssentialLinks')">Essential Links</h2>
    <h2 @click="go('Ecosystem')">Ecosystem</h2>
    <transition appear name="slide">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    go (router) {
      this.$router.push({
        path: `/${router}`
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
h1, h2 {
  font-weight: normal;
}
.slide-enter-active, .slide-leave-active {
  transition: all 0.3s
}

.slide-enter, .slide-leave-to {
  transform: translate3d(100%, 0, 0)
}
</style>

跳转的页面就是一个列表

但是,如果我的路由表这么配置,页面时可以跳转,但是过渡效果没有生效

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
    },
    {
      path: '/essentialLinks',
      name: 'EssentialLinks',
      component: EssentialLinks
    },
    {
      path: '/ecosystem',
      name: 'Ecosystem',
      component: Ecosystem
    }
  ]
})

router-view是基础的动态组建,应该是有动画效果的,希望老师可以帮忙解答,谢谢