Angular vs. React vs. Vue (Part IV: Routing)

In a single-page application, to navigate from one view to another, a routing system needs to be set up.

In all three frameworks–Angular (version 6.0.3), React (version 16.4.1), and Vue (version 2.5.16)–, each view is represented by a component; so, those terms are interchangeable in this article.

Angular provides its own routing module; so does Vue, though it requires an additional installation. React lists several third-party routers–I chose react-router.

I’ve created a simple app which incorporates a simple routing setup. The app has the following three views.

  • Dashboard: displays tasks which are due soon.
  • Tasks: displays all tasks.
  • Task Detail: displays the detail of a task.
Dashboard view

Dashboard view

Task detail view

Task detail view

Sample Code

Angular

Angular’s documentation recommends creating a separate module (app-routing.module.ts) within the app to configure the routing.

React

react-router takes a different approach (called “dynamic routing”) as to when/where to apply the routing configuration. Its Router library provides routing-related components and you add them within the template (JSX code). The configuration (mapping of paths to components) is specified using directives within the template.

Vue

For a Vue app, the routing configuration is specified within main.js where the app is initialized.


Angular’s and Vue’s routes are configured as part of initialization of the app; it happens before any of the components are rendered. React’s react-routers provides its functionalities via components–the same component concept that you use to declare a view. In a React app, you will see the declaration of router and routes within app components (whether it’s the top-level or a lower-level component). In Angular and Vue, the code pertaining to the router module and the routes don’t intermingle with that of components.

Routes definition. (Left to right: Angular, React, Vue)

Routes definition. (Left to right: Angular, React, Vue)

To display the active view, Angular and Vue use a placeholder directive (router-outlet and router-view, respectively) while react-router uses the same route components to define route mapping and render the selected view.

Active view placeholder. (Left to right: Angular, React, Vue)

Active view placeholder. (Left to right: Angular, React, Vue)

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.