Skip to main content

Vanilla JS Single Page Application Routes | # or URL - #88

Published: March 26, 2022 | DevDrawer

Estimated Reading Time
1 minutes
Video Duration
33:38 minutes

One of the most asked code questions during a front-end interview is "Can you create a single page application with routes, without a framework?" In this tutorial, I show you how to create a custom routing system for your single page application using either the hash or URL method...without a framework.

This tutorial shows you how to build a Single Page App using vanilla JavaScript. I show you how to implement client-side routing both ways (hash or URL) in an easy-to-use format that can be replicated for any project.

So, let's get started with our Single Page Application.

00:00 Intro

01:07 Creating our index.html

04:55 URL-based routing

17:13 Potential issues with URL routing

21:08 Setting titles and meta description

25:25 Add hashed HTML URLs

26:57 Hash-based routing

32:05 Testing both methods

View on GitHub:

Join this channel to get access to perks:

Become a Patreon to show support and get exclusive access to content: