Vue Router

[00:00:00]
>> It's time for us to talk about Routing with Vue Router. Okay, Routing with Vue Router, let's do this. All right, When we take a look at the code and we look back at our C'est La Vue app, You can see here that we're currently faking navigation, not actually working.

[00:00:23]
And so, navigation is a real thing though, we wanna actually be able to track your health, even if it is only a single page application. So, how do we do this? Well, again, like any developer, we can certainly write our own solution for it. But libraries are there to provide us some conventions and more importantly, make it easier for us to debug things in the future, because they provide standards for us.

[00:00:42]
So, the library you're gonna want to bookmark for this is Vue Router. So if you go to router.vue.js.org, this is the page you're gonna need for your exercise. Because one of the things I'd like you all to do going forward is to start getting more familiar with the docs that the team has written for these libraries.

[00:00:59]
This is the official router for vue.js, so it actually is officially maintained by the team. And so, inside of here we'll provide a lot of the explanatory code snippets and stuff. And don't worry, we're not gonna read and walk through this. But I just want you to have this ready so that if you have a specific question, you wanna read about it, it's there for you.

[00:01:16]
But what we're gonna go ahead and do is let's go ahead and get that set up, shall we? So as we can see here, I'm gonna go inside of my playground to sort of demo this first. Let's clear out all these tabs. And if I open up, Right, go here, cd playground, now we're good.

[00:01:36]
Delete that one. Great, npm run dev. And if we're good, we should be back. We are back. My gosh, the black though. I need to change that so it's actually readable. Okay, so we have this, let's go ahead and do some installation, shall we? Npm install vue-router, and then the @4 specifies which version it is.

[00:01:55]
Because Vue Router3, unfortunately, the versions cannot line up, 3 is for Vue2, 4 is for Vue3. Okay, so to verify that this has actually worked, we can check that inside of package.jason now. You will see that, wait, this is cest-la-vue, here's playground. You can see vue-outer right here, 4.1.6.

[00:02:18]
Okay, now that we have this, let's go ahead and keep going, we wanna go ahead and actually get that set up. So, the way routing works inside of vue out of the box is that what we get is the ability to define a route, right. So, there's gonna be a router controller that controls everything.

[00:02:36]
So the way we're gonna do this is, we're gonna create a new file at our source called, router.js. And so, router.js here will follow the syntax that we're gonna see right down here. And basically, what it allows you to do, it allows you to define a set of routes, that's an array, that I'll explain in just a moment.

[00:02:57]
And then, what we need to be able to do then is to then take those routes and actually apply them to the Vue app. And so, inside of our main.ts app, remember here when I was saying that, we can actually do things like chain functionality on top of this train of creating an app and mounting it.

[00:03:16]
So this is where I typically would actually go, const app = create app. Cuz we've now created the app, app.mount app. But then, what this allows us to do is inside of here we need to initialize the router from Vue Router. So, we get to import what? createVue or is definevue better?

[00:03:41]
From vue-router, Then create, there you go. Now the autocomplete is showing up. createRouter, cuz why? We need the router to run everything. So we can say, const router = createRouter(), just like that. And so, you can see that on this line right here const out, createRouter. And then, what you can do is then we can say, app.use(router).

[00:04:11]
And so, let me make sure this works. Okay, this is still missing some stuff, but I wanted at least show this in its simplest form. So this is where I like the declarative nature of it, going step by step. In that, we import what we have from the top, we create an app that's based on this app right here, from our App.vue.

[00:04:29]
Then, we initialize our router, and then the app can then use the router, and then it's mounted to the page. So, it's step by step. As opposed to the alternative just to show you visually what that would look like. Is to then say, createApp(App).use(router), assuming you've declared it already, .mount app.

[00:04:52]
And you can imagine, once you start to chain multiple uses together and you're using multiple libraries, the git-diff on that isn't very pleasant, right. We wanna make things easy for people to review. And again, declarative code is typically easier code to understand, so I prefer the multi-line approach that we have here.

[00:05:07]
Okay, but we're not quite done yet. It's still yelling at us because create router does take an object that we need to configure. The first thing we need to configure are the routes that we want to actually define for our application. So in other words, what URLs go to what pages?

[00:05:23]
So right now, we have all of our stuff existing inside of this components folder. But when we're thinking about it at a larger scale in terms of our app, we wanna think of things like pages or views. And so, the standard folder that is typically named at this point are views.

[00:05:39]
And so, what you might do instead is we might actually then switch over the Pokedex component over to the views. Because you can imagine that you probably want your app to have something like slash Pokedex, we'll show you the Pokedex. That would make sense. And so, how would we actually define that though, right?

[00:05:57]
Because just because we put in the folder, it doesn't do much for us. What we need to do is inside of this router.js that you will have practice creating later, is that we'll have this array of routes that we will get to define. Every route is defined by a couple of properties, one is the desired path that you want it to be.

[00:06:14]
So in this case, we have something for Pokedex. And then, you can define what the component is, that it's going to be. So in this case, we want the Pokedex page component. So what we're gonna do is, we're gonna import and this time I'm gonna rename this though.

[00:06:28]
I usually prefer to try to name them PokedexPage, just to give it a little bit of a differentiator from the rest of the components. And so it'd be, PokedexPage from './views/PokedexPage.vue', and then we can just do PokedexPage. So we can save that, there's our routes. Now, the only thing though is that we do need to export this const, because why?

[00:06:50]
While it's being defined here and the reason why I like to define it over here is because what this allows us to do is to then import it, basically, it allows us to scope the data easier to manage. Otherwise, your main.js, or TS file is gonna get massively large.

[00:07:05]
So, we're gonna go ahead and import routes, I believe is what I called it, yep, I did call it routes, routes from the router.js file. And what we can say is basically these are the routes that we're gonna pass into it, and that's it. That should be good, okay.

[00:07:31]
The other thing we need to do though I realized is that we haven't defined the homepage yet, so the app needs somewhere to go. We have the path, this is the base route. And then, what we wanna do is we want it to actually go to a homepage component.

[00:07:43]
So we don't have that at the moment, and that's totally fine. We just create a standard one to use real quick. So we'll go ahead and do that, HomePage.vue. I'm gonna use my template blog to really create a quick homepage. There we go. And now, we can just import HomePage here at the top, and there we go.

[00:08:06]
So see here we have our routes that go to these specific components. Any questions so far? Feeling good? Okay, well, I'll keep going through this and then questions as always are welcome. Okay, so these routes are being passed into here, right. Cuz the router needs to know what routes are being passed.

[00:08:27]
Okay, so we'll save that. Again, I'm not sure why some of the stuff is yelling at me, looks like some eslint stuff. So, now that we have all this stuff, let's actually try to run it So when we run it, you'll notice, okay, does this file exist? Well, let's see, we'll go inside of PokedexPage.

[00:08:43]
It's yelling at us because, well, the stuff we're importing now is in a completely different folder. So, base-button.vue, does this file exist? Go back, go to components, go to base-button, yeah, it does exist. What are you talking about? There we go. Refresh, okay. Error, provide a history option when calling createRouter.