vue编程跳转接口push 转场动画

• 1.index.js 配置子路由children。

import Vue from 'vue'
import Router from 'vue-router'
import SingerDetail from 'components/singer-detail/singer-detail'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/recommend'
    },
    {
      path: '/singer',
      component: Singer,
      //配置子路由,加一个参数children
      children: [
        {
          //:id 以id为变量,传递一个参数,跳转到不同子路由
          path: ':id',
          component: SingerDetail
        }
      ]
    },
    {
      path: '/search',
      component: Search,
      children: [
        {
          path: ':id',
          component: SingerDetail
        }
      ]
    }
  ]
})

• 1.Singer

<template>
  <div class='singer'>
    <list-view @select='selectSinger'></list-view>
    //需要用routeview承载子路由
    <router-view></router-view>
  </div>
</template>

<script>
  import listView from '../components/listview'
  export default{
     methods:{
       selectSinger(singer){
           //vue编程式跳转接口push
           this.$router.push({
               path:'/singer/'+singer.id
           })
       }
     },

     components:{
         listView
     }
}

</script>

<style>
    .singer{

     }
</style>

• 2.listview (singer子组件)

<template>
  <div class='listview'>
    <ul>
      <li @click='selectItem(item)'></li>
    </ul>
  </div>
</template>

<script>
  export default{
   methods:{
      //内部把点击事件派发出去,告诉外部我被点击
      selectItem(item){
         this.$emit('select',item);   
      }
   }
}

</script>

<style>
    .listview{

     }
</style>

• 3.singerDetail

<template>
  <transition name='slide'>
    <div class='singer-detail'></div>
  </transition>

</template>

<script>
</script>

<style>
    .singer-detail{
        position:fixed
        z-index:100
        top:0
        left:0
        right:0
        bottom:0
        background:lightgray
     }
     .slider-enter-active,.slider-leave-active{
        transition： all 0.3s
      }
      .slider-enter,.slider-leave-to{
         transform: translate3d(100%,0,0)
       }
</style>

4.push转场动画

<transition name="slide">
        <div class="chatdiv">
            <div class="back" @click="backAction"></div>
            <div class="cont">免费咨询专业医生在线解答</div>
        </div>
</transition>

<style>
.slide-enter-active,.slide-leave-active{
        transition: all 0.3s;
    }

    .slide-enter,.slide-leave-to{
        transform: translate3d(100%,0,0);
    }
</style>