History Management

[00:00:00]
>> So what is its history mode that it's yelling at us about? History mode is a way to basically define how you want your URLs to be displayed. Traditionally speaking, when you're looking at the view router doc's, and we check it out here. So, traditionally, single page applications because they're just the index HTML file when they're served the webpage, they're known as WebHashHistory.

[00:00:19]
So typically, what you would find is you would basically see like the root page, and then it will say like router.vuejs.org. And then it'll do like this hashtag symbol, and then it will basically do the routing from there. The problem with that is that it's not a true URL.

[00:00:35]
And then there are SEO issues. So what most of us are used to instead is what is termed HTML5 mode or web history. And that is, in other words, how you would expect your URL to normally look. And so basically, you need to define which one it is.

[00:00:51]
So for us, we're going to go ahead and just use the WebHashHistory right now, because there are some things you need to configure for the HTML5 mode. For that, I'm not sure we'll have time to cover, okay? So inside of our router, we have the history and we will say the createWebHashHistory( ), and that can be imported from here, okay?

[00:01:16]
Now, that we have this, this should start to feel a little bit better for the app. Look, already something is showing up. Let me go back to App.vue for our playground. And this time, let me go ahead and swap the color out though to white, so that it's actually easier to read.

[00:01:30]
There we go, okay? Now, we're good. Now, you might notice though, if we're looking here, that this is where the hash history is actually showing up, you see that? It's already starting to do that, but you might realize, wait, but didn't need to find a homepage like, why isn't that showing up?

[00:01:45]
And the reason is because vue router provides us some new built in components. That's going to make all the difference when it comes to helping us manage the routing. So remember how in the seller view I was manually switching the view on stuff. So,we go to App.vue for sale view.

[00:02:02]
Inside of here I had this component is, that was dynamically swapping it out. Well, basically, view router gives us a supercharged version of that, where we can actually just say, okay, inside of my App.vue, I'm going to drop a thing called router view. And if you notice, my homepage has now showed up.

[00:02:26]
And if I switch over to Pokedex, okay. So, we see some errors here regarding the Pokedex, and that is because it looks like it has to do with the fact that there is an asynchronous operation happening. So again, for the sake of demoing this real quick because we want to focus on the routing part and not that.

[00:02:42]
I'm just going to switch the h1 over to Pokedex real quick. And then we can see here, there we go. We have that here, and we go back home, that switches to the homepage. And that at its core is how this all works, right? If we build it up from scratch.

[00:02:59]
And so now with the router view, you might be thinking, well, okay, that's nice, but I don't have to memorize the links. That's not practical. I want actual links, so I can switch it. And so you might think, okay, well my natural instinct then is to create a nav item, or I have an a href, and I'm gonna go to /pokedex, and then pokedex.

[00:03:18]
And then I'll have one for the home. Just like that. So that might be your first instinct. But if we do this and click on it, you'll notice that nothing's happening. Because if we look up here, is actually changing the URL to something that's not actually with the hat.

[00:03:36]
You see this, what I mean? It's blinking out. What you want to do is actually be able to say, it's actually on this side. Because why? Because view router is the one responsible for managing that, not the browser. So don't worry, it's actually pretty easy to do. This is actually pretty easy to do.

[00:03:53]
Rather than using the native anchor tag, what you end up getting instead, it's just like you have router view, you have a router link component. And so, that is view router's way of helping you to manage things like history, there's lots of stuff it can do for you.

[00:04:06]
But the main thing though that's different is that there's to property rather than a href. Because again, it's not truly an anchor tag, it is doing some programmatic stuff underneath the hood to help you move to the desired pages. So save that. And this time, when we swap over, you can see that it's actually doing it correctly.

[00:04:30]
So, if we think about the router view, it really just like the dynamic component. It's just swapping in and out components, and then we have that really nice user experience of having it already be basically automatically configured for us. The one thing I will note in case you're wondering is that you're probably thinking that was a decent amount of setup.

[00:04:51]
Well, I want you to know. So I'm going to go ahead and show you this real quick. This won't be committed as part of the code. If we go ahead and run the npm create vue three. Oops, that was the wrong version, okay. You might remember that there's actually the opportunity to actually add view router as part of your configuration.

[00:05:14]
We explicitly ignored it because it does a few things which I'm about to show you. So I'm gonna say yes this time, and I'll show you what that looks like. So we look at the view project now, you'll notice that it actually looks a bit different. It comes with more boilerplate now, so you can see inside of main.js.

[00:05:34]
The router is already being used. There already is a router.js basically already created with all this base stuff already waiting for you regarding like a home view. It has some basically some prefix stuff. It's even generated a views directory with some sample pages. And so your App.vue out of the gate is actually configured.

[00:05:53]
To already use, you can see the router link here. You can see the router view here. So just know that what I did is to show you how you might do that from scratch. Most of the time, you're not gonna be doing that. It'll already be configured for you, you're going to go in there and make some changes.

[00:06:07]
And so again, if you ever want a reference on a clean way of how they did it, you can always scaffold a new project with it, and you'll get everything you need.