<router-view> 是基本的动态组件，所以我们可以用 <transition> 组件给它添加一些过渡效果：

上面的用法会给所有路由设置一样的过渡效果，如果你想让每个路由组件有各自的过渡效果，可以在各路由组件内使用 <transition> 并设置不同的 name。

const Foo = {  template: `    
           
      
       ...
      
    
       `}const Bar = {  template: `    
           
      
       ...
      
    
       `}

还可以基于当前路由与目标路由的变化关系，动态设置过渡效果：

// 接着在父组件内// watch $route 决定使用哪种过渡watch: {  '$route' (to, from) {    const toDepth = to.path.split('/').length    const fromDepth = from.path.split('/').length    this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'  }}

详细参看Vue Router