过渡动效

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

过渡动效

单个路由的过渡

若希望给每个路由组件设置各自的过渡效果,可以在各组件内使用 <transition> 并设置不同的 name

过渡动效

基于路由的动态过渡

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

过渡动效

接着在父组件内,watch $route 决定使用哪种过渡

过渡动效