重拾vue–vue-router进阶

路由组件传参
HTML5 History模式
导航守卫
路由元信息
过渡效果
name=”router”,对应class中的router-enter
<transition-group name=”router”>
<router-view key=”default”/>
<router-view key=”email” name=”email”></router-view>
<router-view key=”tel” name=”tel”></router-view>
</transition-group>
style
//进入前
.router-enter{
opacity: 0;
}
//进入中
.router-enter-active{
transition: opacity 1s ease;
}
//进入后
.router-enter-to{
opacity: 1
}
.router-leave{
opacity: 1;
}
.router-leave-active{
transition: opacity 1s ease;
}
.router-leave-to{
opacity: 0;
}