1. 处理类 : 先给class加v-bind绑定 => :class , 然后再三元表达式 :class = "[‘mui--control-item‘,item.id == 0 ? ‘ mui-active‘ : ‘ ‘ ]"
2. 处理路由高亮
路由配置的第二个参数 用这个去覆盖默认高亮类 router-link-active
3. 视图切换样式 (包住路由的区域,因为只有路由在切换的时候才需要改造样式,其他都是固定的)
1 .v-enter {
2 opacity: 0;
3 transform: translateX(100%);
4 }
5
6 .v-leave-to {
7 opacity: 0;
8 transform: translateX(-100%);
9 position: absolute;
10 }
11
12 .v-enter-active,
13 .v-leave-active {
14 transition: all 0.5s ease;
15 }
<transition>
<router-view></router-view>
</transition>
4. 阻止页面切换时出现滑动条
1 .app-container {
2 overflow-x: hidden;
3 }
5.
原文:https://www.cnblogs.com/it-Ren/p/10714145.html