对vue的transition 路由的meta属性进行了封装

保证了 左边是swipe-left 右边是swipe-right
代码如下

let max=0;
let getDeep=(route)=>{
  let count=1;
  let tem=[];
  if(route.children){
    tem=route.children.map(i=>{
      return getDeep(i);
    })
  }
  if(tem.length){
    return count+(Math.max(...tem));
  }
  return count;
}
let getMax=(r)=>{
  let tem=r.map(i=>{
    return getDeep(i);
  })
  return Math.max(...tem);
}
max=getMax(routes);
let getProvide=function(item,ind,send,count){
  if(!item.meta){
    item.meta={};
  }
  item.meta.index=send+Math.pow(10,count-1)*(ind+1);
  if(item.children){
    item.children.forEach((j,ind)=>{
        getProvide(j,ind,item.meta.index,count-1);
      });
  }
}
let provide=(routes)=>{
  routes.forEach((i,index)=>{
    if(!i.meta){
      i.meta={};
    }
    i.meta.index=index*Math.pow(10,max-1);
    if(i.children){
      i.children.forEach((j,ind)=>{
        getProvide(j,ind,i.meta.index,max-1);
      });
    }
  })
}
provide(routes)
在创建vue 实例前进行赋值
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,879评论 1 45
  • 如需转载, 请咨询作者, 并且注明出处.有任何问题, 可以关注我的微博: coderwhy, 或者添加我的微信: ...
    coderwhy阅读 9,003评论 12 35
  • 触控板存在的问题 Macbook 的触控板(Trackpad)已经给了我们极大的便利,在系统设置->触控板 里面已...
    xiazdong阅读 25,179评论 6 30
  • 各种纯css图标 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比...
    剑残阅读 9,731评论 0 8
  • 今天和朋友约定好举办一个图书借阅活动,刚好在大一一年里看了很多书攒了快一个箱子里,想着拿出去借阅借阅遇见爱阅读的人...
    小温梓阅读 214评论 0 0