Vue 2 Internal Features from the Ground Up

Challenge 14: Solution

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: Solution" 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:

Evan walks through the solution to Challenge 14.


Transcript from the "Challenge 14: Solution" Lesson

>> Evan You: As mentioned, if you're using REDUX functions, we don't really need all of that. We need to implement it ourselves. And the url handling part is largely the same as last time. Window.location.hash slice1, and we'll just copy this, and update our app.url when everything's changed. And the [SOUND] midi part here is how to figure out which component to use.

So lets write the router table so we can obviously just do this, [SOUND] pretty straightforward. So just so that it looks more like a router table let's make the key strings and, what to do here is we still need a root level div if we want to render those links as well.

Inside the div the first thing we want to return is the component, essentially the router view that we want to render for the current route. And we have the current URL. And we have the route table. So let's just check if the route table contains a component that's matching what we want here.

And if there's nothing there, we can simply fall back to the not found component. So this completes the task of finding the corresponding component out of the route table and falling back to the NotFound if there is nothing matched. And we also need to have the two a links, I believe.

[SOUND] Foo.
>> Evan You: And copy it with it bar.
>> Evan You: So one thing you may notice, if we run this,
>> Evan You: But notice that there's no space between foo and bar, unlike if you use templates. This is because when you use HTML templates, it retains the white space between your elements if there are new lines.

This is the same behavior as if you're writing normal HTML, but when you're using Reno functions, there's no white space node between the foo and bar. So they're just close to each; there's no white space in between. So a lot of people are not used to this when they switch to reno functions.

And you can either deal with this with CSS, or if you want to, you could just add an empty space in between manually.
>> Evan You: So this should make it look better.
>> Evan You: And it switches and more importantly. Let's go to some random URL and it will show not found.

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