var Home = {
template: `
`
}
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
- /
- /parent
- /parent/foo
- /parent/bar
`
}).$mount('#app')