vue路由动态过渡效果
不多说,直接上代码
import Vue from 'vue' //引入vue import VueRouter from 'vue-router' //引入路由 Vue.use(VueRouter) //使用路由 //定义Home组件 const Home = { template: ` <div class="home"> <h2>Home</h2> <p>hello</p> </div> ` } const Parent = { data () { return { transitionName: 'slide-left' } }, // 基于路由变化动态设置转换 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: ` <div class="parent"> <h2>Parent</h2> <transition :name="transitionName"> <router-view class="child-view"></router-view> </transition> </div> ` } const Default = { template: '<div class="default">default</div>' } const Foo = { template: '<div class="foo">foo</div>' } const Bar = { template: '<div class="bar">bar</div>' } //定义路由路径 const router = new VueRouter({ mode: 'history',//历史模式 base: __dirname, routes: [ { path: '/', component: Home }, { path: '/parent', component: Parent, children: [ { path: '', component: Default }, { path: 'foo', component: Foo }, { path: 'bar', component: Bar } ] } ] }) new Vue({ router, template: ` <div id="app"> <h1>Transitions</h1> <ul> <li><router-link to="/">/</router-link></li> <li><router-link to="/parent">/parent</router-link></li> <li><router-link to="/parent/foo">/parent/foo</router-link></li> <li><router-link to="/parent/bar">/parent/bar</router-link></li> </ul> <transition name="fade" mode="out-in"> <router-view class="view"></router-view> </transition> </div> ` }).$mount('#app')