Vue 2 Internal Features from the Ground Up

Challenge 13: Basic Hash Router

Evan You

Evan You

Creator of Vue.js
Vue 2 Internal Features from the Ground Up

Check out a free preview of the full Vue 2 Internal Features from the Ground Up course

The "Challenge 13: Basic Hash Router" Lesson is part of the full, Vue 2 Internal Features from the Ground Up course featured in this preview video. Here's what you'd learn in this lesson:

In this challenge, students build a simple hash routing system.


Transcript from the "Challenge 13: Basic Hash Router" Lesson

>> Evan You: So, routing. How many of you have used the devue router? Okay, how many of used the router of sorting another framework? Okay, great. So, I guess, most of us know what single page application routing is all about. You have URLs, you wanna map them to components, that's the gist of it.

So, the goal of these exercises is really about going from the ground up and see how it can be done in the view context. So, let's go into the first exercise in routing
>> Evan You: And it's,
>> Evan You: Let's put a very extremely simple hash-based routing solution. It's not even a router, it's just routing using direct browser API's.

So, we all know that in the browser there are two ways to do routing you can use a hash or you can use the HTML5 History API. HTML5 History API is better in the sense, it supports pop state and you get better looking URLs but it requires some sort of server configuration, so that when you directly visit a deep link, the server still renders the same static HTML page for your client-side router to pick up.

So, for the sake of exercise where just also the history API is a bit more complex than a hash API to work with. So, for the sake of the exercise, we're just gonna stick to hash routers. Because aside from the browser API differences, the [INAUDIBLE] Implementation is really the more similar and more important part.

Our goal is build a small app that when hash is foo, it should display foo. When hash is bar, it should display bar, simple as that. The two APIs you can use is, if you wanna access the current hash in the URL, use window.location.hash. If you wanna listen to hash changes, you can add a hashchange listener to your window, to listen for changes.

And the template is already written out for you. You need to figure out what to fill in here. This is where our main view will be rendered. We provide two link already, and the rest is up to you.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now