vue判断路由中的name给高亮显示/菜单高亮
vue 2017-12-29 10:55:13

router：

JavaScript Code复制内容到剪贴板
  1. {  
  2.     path: '/witsbox/main-menue',  
  3.     name: 'mainMenue',  
  4.     components: {  
  5.         header: AppHeader,  
  6.         main: mainMenue,  
  7.         footer: AppFooter  
  8.     }  
  9. },  

 

 

JavaScript Code复制内容到剪贴板
  1. <div class="footer_item" :class="{'home_active':menuName=='mainMenue','home':menuName!='mainMenue'}" @click="toRouter('/witsbox/main-menue')">  
  2.     <div class="icon"></div>  
  3.     <div>首页</div>  
  4. </div>  

 

这里的menName是在router中定义路由的时候的name值，保证唯一性即可

JavaScript Code复制内容到剪贴板
  1. export default {  
  2.     name: "AppFooter",  
  3.     data(){  
  4.         return{  
  5.             menuName: ''  
  6.         }  
  7.     },  
  8.     created () {  
  9.         this.$router.afterEach((to, from) => {  
  10.             this.menuName = to.name; //获取菜单名  
  11.         });  
  12.     },  

 

本文来自于：http://www.yoyo88.cn/study/vue/263.html

上一篇 动态立体盒子效果
下一篇 vue 表单禁用数字以外的输入
相关的文章
Powered by yoyo苏ICP备15045725号