Vue Router Exercise

[00:00:00]
>> So for this particular exercise, I want you to try practicing configuring it from scratch. Because I want you to get familiar with the files that are critical to how Vue Router works. So as a general guidance, use the Vue Router docs for reference. I do not expect you to memorize all this.

[00:00:17]
And in fact, if you do a lot of copy and paste from the sample code, that's totally fine. The goal is for you to configure, get a feel for how things are being, basically configured out of raw directory. And then other than that, you can move any page components that you think is relevant inside of your c'est-la-vue app.

[00:00:35]
And then after that we'll go ahead and upgrade the App.vue to use router, link and Router Vue, so that everything renders correctly. All right, welcome back, how was that experience was a little bit harrowing from like just all the configuration, yeah, I completely understand. So we're gonna do a run through just again just to reiterate those steps and then we'll share some tips and tricks along the way.

[00:01:02]
So how this will work, is we're gonna go over to c'est-la-vue, let me go ahead and do cest-la-vue, great. And then let's play around with this. First thing first is we need to install vue-router version, oop not version r version four, there we go. Then what we're gonna do is we're go ahead and configure our app.

[00:01:29]
Actually, let me go and run it as well, so we can see the changes happening. There we go, we're in it, okay? So inside of our main.js app, we'll see that we don't have a router right now, so let's go ahead and fix that. Import create router from, I usually prefer when I have the autocomplete, but I'm fairly confident in this one, great, yep it's, right?

[00:01:51]
So we can do now is your const app is your tree app and then to make it more declarative we'll do app.use(router), which I need to define in a second, and then app.mount. Whoops, not a board controller. And then we can just define our router this way to create router.

[00:02:13]
We need to pass some options to it, so the history on this is gonna be create web history. And again, the reason we're doing this is because it does require some server configurations in order to get it to work on the normal HTML5 mode. And so again, I'll leave it to you and the dots depending on how you're deploying it to do that.

[00:02:30]
But generally speaking, what you're doing is you wanted to redirect always to index HTML. And again, plenty of that to support probably wherever you're deploying it to. In the meantime, WebHashHistory is what we're gonna use because that is the most universal one in terms of like ensuring that things don't break.

[00:02:44]
And that is a function that we need to run, and then we need to be able to find the routes. And so just to do this slightly differently, so you can actually see what's actually going on here. So we can actually just define the routes in here as well, it just I separate them out into a file normally to make it a little bit easier for management.

[00:03:00]
But again, to sort of help seal the mental model a little bit more, we're gonna do it this way. So inside of the components we can see what kind of pages do we already have? Well, we already got three actually aptly named pages, so and create a folder for views and let's just move them over.

[00:03:16]
Yep, okay, what is volere want to do? It knows I wanna change it, great, please do that for me. I'm gonna move that as well. I'm gonna trust it to do its thing, great. All right, so now should have a bunch of things moved over, but there was a good question that was asked earlier regarding.

[00:03:35]
It's nice for us to be explicit about where the file path is. But anyone who's worked on a large app before will know that when it comes to moving files, that can be a bit of a pain when you're moving up directories down directories. And isn't there an easier way to do this that it always refers to the root directory?

[00:03:49]
That way, no matter where you, as long as you're not doing a ton of nested folders, it should make life a lot easier. And so the secret to this actually is that we actually do have that already built in. And that's the Add symbol. And so when you do the Add symbol, what that does is it says please go to the source folder, and then start your file path from there.

[00:04:06]
And it's a really nice alias to have. Now I'm telling you this and you might be like, that sounds like black magic, it's not. If you look inside of our vite.config, in fact this is a default to be honest, but I'll just stick it to c'est-la-vue. You'll see here that there actually is an alias being defined from vite that says, hey, this is the Add symbol, and what I want you to do, is automatically put the file URL path to this ./source directory.

[00:04:32]
So what this means is you can configure it to whatever you want. It doesn't have to be app, but that just happens to be the happens to be a convention for a lot of applications. So the Add symbol is there for you. If you want to simplify the fact that you don't have to navigate now, wait, what folder am I in and what's going on?

[00:04:45]
Now that we have that, let's keep on going. So first thing first, what kind of routes do we have? Well, we're gonna wanna have a path for the homepage. And so what component is that? We're gonna wanna do the component for homepage, all right? So here we have homepage, but we need to import that, so we have homepage from, let's use our handy alias components/homepage.vue.

[00:05:07]
And that's super convenient because I don't have to think where am I inside of the directory? It's super, super nice. Great, there was a comment in the audience that we moved it to vue, it's not in component anymore. And that's correct, so that would break, but from the not having to think about what directory I'm in, that is helpful.

[00:05:24]
There we go, look, everything's showing up. Okay, then we have a path here, and let's just go ahead and copy this block real quick, just to make this a little bit easier. And so we have login, and then we have user. Okay, UserPage, great. And then we have UserPage, Login Page, and this is how most of us would probably do this part.

[00:05:49]
Log in is an L and then P or U for UserPage, there we go save great. And then what we can do now is go inside of our app.vue, for c'est-la-vue. And rather than having this all be managed now with the current page and what not. We can actually make this a lot simpler, so what we're gonna do here is we're gonna go ahead.

[00:06:08]
And rather than put the component here we're just going to do, let me delete it first to show that everything was working. Okay, great it's gone, now we're just gonna put Router-Vue and just like that, we have our pages.
>> Your routes are all defined to go to homepage.

[00:06:26]
>> Yes, they are all defined to go to homepage, good catch. So we no longer need to track any of these things because this is being now managed at the router level. So in case you've seen the duplicates, you should not have duplicates. There you go, don't need that component.

[00:06:40]
In fact, we don't need any of this because all of this is doing is trying to do all the programmatic things that the vue router will do for us out of the gate. So I can actually just wipe out this whole thing. And then we can no longer reference any of these things, let's comment that out real quick.

[00:06:58]
And then I think we're good as far as that goes. Now we need to actually have the ability to switch it out. So rather than use the eight tags, we're gonna go ahead and use our router link, sorry. One, two router link, then we have this right here, one, two router link.

[00:07:22]
Then we no longer have to worry about the click, handling and preventing that. So all of that can be deleted, cleaned up, and then instead href, what we're gonna do, is to move. And then just do two, and then we can go ahead correctly then go login, user home.

[00:07:46]
Once you have that, there you go, everything works just as you would expect. Okay, so before I wrap up this exercise though I think I do want to show you. If we go back to the boilerplate that we created with vue three and this time adding the fact that we have to do here's the router, okay?

[00:08:12]
You might notice something right here, which is kind of interesting in that you can actually write a function where the component is in order to dynamically import that vue. And the reason this is a powerful technique while relatively simple is that It will then automatically generate a separate build chunk that will lazy load when it's being loaded.

[00:08:33]
Because the problem right now if we look at how we're actually loading the route right now in main.js. And say I love you, we're importing every single component that the app might possibly need to route to and if that app gets pretty large, that's a lot to break apart.

[00:08:49]
So generally speaking, it's considered best practice to go ahead and just like we see inside of this router.js. Whoop, not this one, we're looking at this one, to go ahead and just import the path directly. So I'm gonna go ahead and do that for us, so that we can actually have that as a record of that.

[00:09:06]
So again, rather than have these two up here cuz we don't know when users are going to log into that, we know that home page needs to be imported. So that cannot be dynamically imported, but everything else that has potential. So we can go ahead and drop the in ports here and the way it works is it's a function that returns this path, and that's what that looks like.

[00:09:36]
With that, I think I had a right, just make sure one more time, that one's not easy to read. Import yeah, so I mistakenly did that the other way it is a function that does the import here and imports the specific path just like that. So again, we can see user experience wise as far as development goes.

[00:10:02]
You probably wouldn't really know the difference, but this optimization can help a lot when it comes to your apps going forward.