how to send multiple parameters from view to api controller in mvc4

I'm afraid that your url is too long (>255 characters), You can try this.

$.ajax({
     type: 'POST',
     url:"api/HomeToSchool",
     data:{routeInfo:routes,colors:colorsArray,times:mytimeArray,distances:myDistancArray,dir:dir},
     dataType: "json",
     traditional:true,
     function (data) {
                        if (data = true) {
                            alert("Routes Saved Successfully");
                        }
                        else if (data = false) {
                            alert("Routes are not saved");
                        }
                    }
});

and your controller:

public bool PostHomeToSchoolRoutes(string[] routeInfo,string[] colors,double[] times,double[] distances,int dir)
        {
// my logic
}

I see that you're using 2-dimensional array for routeInfo. But there is only 1 item, i think you should change it to 1-dimensional array to make it compatible with the controller code string[] routeInfo

Far too much information going into the URL here, not only that your not correctly appending the parameters together they need to be separated using & not ;.

On top of that, your not really taking advantage of the MVC capabilities here. At the client side you want to send up your information as a collective object rather than individual parameters e.g.

var schoolRoutes = {
    routes: routes,
    colors: colorsArray,
    times: mytimeArray,
    distances: myDistanceArray,
    direction: $("#Direction").val()
};

$.ajax({
    type: 'POST'
    url: "api/HomeToSchoolRoutes",
    data: JSON.stringify(schoolRoutes),
    dataType: "json",
    success: function (data) {
        if (data = true) {
            alert("Routes Saved Successfully");
        }
        else if (data = false) {
            alert("Routes are not saved");
        }
});

Then at the server side, introduce a class which will be able to bind to the incoming data aka a ViewModel

public class RouteInfoViewModel
{
    ...
}

public class SchoolRoutesViewModel
{
    public RouteInfoViewModel[] Routes { get; set; }
    public string[] Colours { get; set; }
    public double[] Times { get; set; }
    public double[] Distances { get; set; }
    public string Direction { get; set; }
}

Then update your action to expect this particular ViewModel and that should give you access to all the information posted.

public bool PostHomeToSchoolRoutes(SchoolRoutesViewModel schoolRoutes)
{
    ...
}