Check out a free preview of the full Advanced Vue.js Features from the Ground Up course:
The "Challenge 15: Dynamic Routes" Lesson is part of the full, Advanced Vue.js Features from the Ground Up course featured in this preview video. Here's what you'd learn in this lesson:

In this challenge, students create a dynamic routing system with regular expressions.

Get Unlimited Access Now

Transcript from the "Challenge 15: Dynamic Routes" Lesson

[00:00:00]
>> Evan You: So, our goal in this exercise. So we still have full bar and not found. The differences is we want foo to have a dynamic segment,
>> Evan You: Right? So, if we visit the hash with like /foo/123, our foo component here takes an id prop. It takes a prop, it expects an id prop and well,

[00:00:29]
>> Evan You: It will render that id out, which means if we're at /foo/123, this id will be 123 here, okay? And we still have the route table. The raw route table that is. So this raw route table essentially should look like this, 'foo/: id': Foo. So this route table is exposed to users, this is essentially our public API.

[00:01:07] And I should probably just list this as part of the, you should not be implementing this. It's required to look like this, okay? So our goal is we have an app here.
>> Evan You: And we've already done most of the basic work for you. So what you need to do, so the render function is largely filled out for you.

[00:01:38]
>> Evan You: We get the path and we have two things we need. First is to determine which component to render? The second is to determine what props to pass to this component? And our render functions are also already written for you. So it's rendering the component to render and passing it to corresponding props.

[00:02:00] And we have a few links as well. So your job is to implement this part to figure out which component to render. And figure out what props to pass to that component. And with this route table configuration.