Vue 2 Internal Features from the Ground Up

Challenge 14: Route Table

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 14: Route Table" 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 implement a route table.


Transcript from the "Challenge 14: Route Table" Lesson

>> Evan You: This is pretty straightforward, but we notice that our configuration is essentially hard-coded. Ideally, you have an app and you have some routing configurations. You want this routing to be somehow hoisted out so that you can have a routing table you can look at. You know which path corresponds to what, which this example does not have.

So our next exercise is essentially building it on top of that, I need to switch back.
>> Evan You: 5.2, now we have a bit more boilerplate written for you. We have a foo component, have a bar component, and we have a not found component, okay, and we have a route table.

We want to implement the route table so that the rendering is the source of truth, how your path to correspond to components should be from this route table. And the behavior should remain the same from the last half except for when you are at a hash that is not foo or not bar it should display not found.

>> Evan You: And just as a hint it's probably a good idea to use render functions for this exercise.

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