One of the most common uses of a JavaScript framework is creating Single Page Apps, and the central feature required to do this effectively is a router. All modern frameworks have one of these, and for the most part they operate similarly.

With that in mind I got curious recently about how different frameworks implement their routing logic. What I found was a surprising variety of implementations, which reveal quite a lot about the way the frameworks are structured and the intentions behind them. The frameworks I investigated were what I consider to be the most common and modern frameworks in JavaScript at this time: Angular 2, Ember, React, Vue, Meteor and Aurelia.

Each of these frameworks has a sizable and vocal following. Further discussion will focus entirely on the syntax and structure of the router alone, and shouldn’t be taken as a criticism or praise of the framework in its entirety. It should also go without saying that the following is largely subjective. I’m not an expert on all of these frameworks, and am attempting to take an open and honest look at these features based on their official documentation and some supplementary information. Every attempt has been made to provide well-intentioned and accurate information, but if features are not discussed correctly, please feel free to comment accordingly and the record will be corrected.

The same site structure is to be replicated in all routers — a site index, a static “about” page, a posts list page, and a page for an individual post. Ideally the post should be a child or nested route of the posts, though this is not universally supported. Every effort has been made to make the code represent idiomatic usage of the framework, and various bits of boilerplate and setup are omitted.

I want to acknowledge up front that my chief experience is as an Ember developer, and this article is written from that basis. The intention here is to share my learning around a range of technologies, not to engage in endless debate about framework specifics.