var Home = { template: `

Home

hello

` } var Parent = { data () { return { transitionName: 'slide-left' } }, // dynamically set transition based on route change watch: { '$route' (to, from) { const toDepth = to.path.split('/').length const fromDepth = from.path.split('/').length this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left' } }, template: `

Parent

` } var Default = { template: '
default
' } var Foo = { template: '
foo
' } var Bar = { template: '
bar
' } var router = new VueRouter({ mode: 'history', routes: [ { path: '/', component: Home }, { path: '/parent', component: Parent, children: [ { path: '', component: Default }, { path: 'foo', component: Foo }, { path: 'bar', component: Bar } ] } ] }) new Vue({ router:router, template: `

Transitions

` }).$mount('#app')