重拾vue–vue-router进阶

19次阅读

共计 460 个字符,预计需要花费 2 分钟才能阅读完成。

路由组件传参
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;
}

正文完
 0