1. 处理类 ：  先给class加v-bind绑定  =>  :class ,  然后再三元表达式 :class = "['mui--control-item',item.id == 0 ? ' mui-active' : ' ' ]"

2. 处理路由高亮 

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

　　

  •  ： MUI库中默认的高亮是 ' mui-acrive',  （推荐）

路由配置的第二个参数 Vue笔记 随笔 第1张  用这个去覆盖默认高亮类 router-link-active

 

 

 
 

 
 

     
 
  •  把router-link-active 的样式改了  Vue笔记 随笔 第2张  （不推荐 因为要设置样式表 还要考虑优先级 很麻烦）
    •  

 

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.把router-link标签 指定渲染成li标签  =>  加tag属性     tag= “ li ”
 

6.router-link跳转到带有id的地址上：
 

如果是普通的跳转 直接to 就行，但如果地址带有id，name就要改造to 因为item.id是一个表达式  
  

1 <router-link v-for="item in list" :key="item.id" :to="'/home/photoinfo/' + item.id" tag="li">
  

 

    

        

            

                

                    

                        
                    

                    

                        

                            扫码关注我们
                        

                        

                            微信号：SRE实战
                        

                        

                            拒绝背锅 运筹帷幄