<transition name="fade">运动东西(元素，组件、路由....)
</transition>

class定义:
.fade-enter{}    //初始状态（动画开始的状态）
.fade-enter-active{}  //变化成什么样  ->  当元素出来(元素显示时候的状态)

.fade-leave{} （动画开始的状态）
.fade-leave-active{} //变成成什么样   -> 当元素离开(元素消失的时候的状态)

//另外，transition 标签上面还有几个回调事件before-enter,enter,after-enter,leave....

<transition name="fade"　　@before-enter=""　　@enter=""　　@after-enter=""　　......

> 　　运动东西(元素，组件、路由....) </transition>

　　　　　　<transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight"><p v-show="show"></p></transition>

　　　　<transition-group enter-active-class="" leave-active-class=""><p :key=""></p><p :key=""></p></transition-group>

1.  html布局<router-link to="/home">主页</router-link><router-view></router-view>
2. 路由具体写法//组件var Home={template:'<h3>我是主页</h3>'};var News={template:'<h3>我是新闻</h3>'};//配置路由const routes=[{path:'/home', componet:Home},{path:'/news', componet:News}];//生成路由实例const router=new VueRouter({routes});//最后挂到vue上new Vue({router,el:'#box'});
3. 重定向之前1.0中  router.rediect  废弃了　　2.0中使用配置项

　　　　{path:'*', redirect:'/home'}配置的路由routes数组里面的一项

　　　　const routes=[ 　　　　　　{path:'/home', componet:Home}, 　　　　　　{path:'/news', componet:News}, 　　　　　　{path:'*', redirect:'/home'} 　　　　];

路由嵌套:/user/usernameconst routes=[{path:'/home', component:Home},{path:'/user',component:User,children:[      //核心{path:'username', component:UserDetail}]},{path:'*', redirect:'/home'}  //类似404，找不到就到这个路由];

　　 1、父路由中传递参数的路由链接<li><router-link to="/user/strive/age/10">Strive</router-link></li><li><router-link to="/user/blue/age/80">Blue</router-link></li><li><router-link to="/user/eric/age/70">Eric</router-link></li>在子路由中使用参数2、var UserDetail={template:'<div>{{$route.params}}</div>'};3、配置路由格式const routes=[{path:'/home', component:Home},{path:'/user',component:User,children:[{path:':username/age/:age', component:UserDetail}]},{path:'*', redirect:'/home'}  //类似404，找不到就到这个路由

];

路由实例方法:router 实例router.push({path:'home'});  //直接添加一个路由,表现切换路由，本质往历史记录里面添加一个，用的是history的pushStaterouter.replace({path:'news'}) //切换路由，不会往历史记录里面添加

    <transition enter-active-class="" leave-active-class=""><router-view></router><transition>

 vue-loader1.0  -> new Vue({el: '#app',components:{App}})    2.0->new Vue({el: '#app',render: h => h(App)})

加载css就需要这两个loader
style-loader    css-loaderstyle!css
配置css加载器的时候webpack.config.js中{test:/\.css$/,loader:'style!css'  //style和css的顺序很重要}