JavaScript 页面跳转的方式

在我们的 b2cube 的项目里面，页面跳转的方式与其他的项目不同，它是用 JS 里面定义的 function v () 实现的页面跳转。

function v( url = '', target = '#canvas' , param ){
  current_url = url?url:hist[hist_positon-1];
  console.log(current_url);


  var loading = layer.load(1, {
    shade: [0.1,'#fff'] //0.1透明度的白色背景
  });

  segs = current_url.split('/');
  seg1 = segs[0]?segs[0]:'home';
  seg2 = segs[1]?segs[1]:'index';
  seg3 = segs[2]?segs[2]:null;
  seg4 = segs[3]?segs[3]:null;
  // 载入页面 #canvas 为主界面刷新，其他用过layer 显示。
  switch(target){
    case '#canvas':
      if(seg2 == 'view' ) uuid = seg4?seg4:seg3;
      hist_positon = hist.push(current_url);
      $(target).load('?/'+ current_url , param,function(){form.render();});
      layer.close(indexw);
      layer.close(loading);
      break;
    case '#del':
      $.post('?/'+ current_url , param,function(html){});
      break;
    default:
      $.post('?/'+ current_url , param,function(html){
        indexw = layer.open({
          type: 1,
          area:'800px',
          move:false,
          maxWidth:800,
          shadeClose:true,
          content: html,
          success: function(layero, index){
            layer.close(loading);
            $(layero).find('form:first').attr('layerindex',index);
            form.render();
          }
        });

        console.log(indexw);
      });
      return;
  }
  if(seg3 == null ){
    $('#menu2wrap').animate({left:'0px'});
    $('#menu2-0').empty();
    if(!(typeof(menu[seg1]['title'])=="undefined")){
       $('#etitle').html(menu[seg1]['title']);
       $('#menu2-0').append('<li class="title" ><a >'+ menu[seg1]['title'] +'</a></li>');
    }
    var submenu = menu[seg1]['children'];
    $.each(submenu, function(e, ele) {
      if( ele.hidden )return;
      $('#menu2-0').append('<li id=\'menu-'+seg1 +'-'+ e  + '\' class="layui-nav-item" ><a href="javascript:v(\'' + seg1  + '/' + e  + '\');" ><span class="ion-' + ele.icon + '"></span> <span>' + ele.title + '</span></a></li>');
    });
  }
  else{
    $('#menu2-1').empty();
    $('#menu2wrap').animate({left:'-123px'});
    if(!(typeof(menu[seg1]['title'])=="undefined"))$('#menu2-heading').text(menu[seg1]['title']);
    var submenu = menu[seg1]['children'];
    if(!(typeof(submenu[seg2])=="undefined")){
      var submenu2 = submenu[seg2]['children'];
      $('#menu2-1').append('<li class="title" ><a href="javascript:v(\'' + seg1  + '/' + (seg2!='view'?seg2:'index') + '/\')" ><span  class="ion-chevron-left" ></span></a></li>');
      $.each(submenu2, function(e, ele) {
        seguuid = seg4;
        $('#menu2-1').append('<li id=\'menu-'+seg1 +'-'+ seg2 +'-'+  e  + '\' class="layui-nav-item" ><a href="javascript:v(\'' + seg1  + '/' + seg2 + '/' + e  + '/' + seguuid + '\');" > ' + ele.title + '</a></li>');
      });
    }
  }

  $('.selected').removeClass('selected');
  $('#menu-'+seg1+'-'+seg2).addClass('selected');
  $('#menu-'+seg1+'-'+seg2+'-'+seg3).addClass('selected');
}

以前的项目当中，是用 URL 资源请求的方式跳转，现在是用 JS 封装了页面跳转的方式，有什么好处呢？这个是 layui 项目的特色，页面加载完成之后，界面会有弹出框的提示，和遮罩层，人机交互更加友好。

每跳转一下，console 会输出当前项目的跳转。