How to locally test sub routes for a basic Javascript router in VSCode live server?

I have an AWS Cloudfront function that redirects urls to several different html pages hosted in S3 along the lines of this:

function handler(event) {
    var request = event.request;
    var uri = request.uri;

    if (uri.split('/')[1] == '') {
        request.uri = '/index.html';
    } else if (uri.split('/')[1] == 'contact'){
        request.uri = '/contact.html';
    } else if (uri.split('/')[1] == 'blog'){
        request.uri = '/blog.html';
    } else if (!uri.includes('.')) {
        request.uri = '/index.html';
    }
    return request;
}

This appears to work fine but I want to build the site locally with my 3 html files in the root directory but have sub routes point to them.

These are the sub routes:

www.example.com
www.example.com/index.html
route to: /index.html

www.example.com/foo
www.example.com/foo/123
www.example.com/foo/abc
www.example.com/foo/def/123
route to: /foo/index.html

www.example.com/bar
www.example.com/bar/123
www.example.com/bar/abc
www.example.com/bar/def/123
route to: /bar/index.html

Effectively I want to be able to use code similar to this to read the pathArray values to change the individual page like blog/hello would show the blog page hello whereas blog would show the blog list:

var pathArray = window.location.pathname.split('/');
document.write("pathArray[0]: " + pathArray[0] + "<br>");   
document.write("pathArray[1]: " + pathArray[1] + "<br>");   
document.write("pathArray[2]: " + pathArray[2] + "<br>");  
document.write("pathArray[3]: " + pathArray[3] + "<br>");   
if (pathArray[3] === undefined) {
    document.write("pathArray[3] === undefined: " + (pathArray[3] === undefined) + "<br>");   
} else {
    document.write("pathArray[3] === undefined: " + (pathArray[3] === undefined) + "<br>");  
}