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')