Because why? Because view router is the one responsible for managing that, not the browser. What you want to do is actually be able to say, it's actually on this side. You see this, what I mean? It's blinking out. Because if we look up here, is actually changing the URL to something that's not actually with the hat. But if we do this and click on it, you'll notice that nothing's happening. 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.

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. And that at its core is how this all works, right? If we build it up from scratch. We have that here, and we go back home, that switches to the homepage. I'm just going to switch the h1 over to Pokedex real quick. So again, for the sake of demoing this real quick because we want to focus on the routing part and not that. 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. And if you notice, my homepage has now showed up. 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. Inside of here I had this component is, that was dynamically swapping it out. So remember how in the seller view I was manually switching the view on stuff. That's going to make all the difference when it comes to helping us manage the routing. And the reason is because vue router provides us some new built in components. 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? And this time, let me go ahead and swap the color out though to white, so that it's actually easier to read. Let me go back to App.vue for our playground. Now, that we have this, this should start to feel a little bit better for the app. 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? 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. And so basically, you need to define which one it is. And that is, in other words, how you would expect your URL to normally look. So what most of us are used to instead is what is termed HTML5 mode or web history. The problem with that is that it's not a true URL. And then it'll do like this hashtag symbol, and then it will basically do the routing from there. So typically, what you would find is you would basically see like the root page, and then it will say like. So, traditionally, single page applications because they're just the index HTML file when they're served the webpage, they're known as WebHashHistory. Traditionally speaking, when you're looking at the view router doc's, and we check it out here. 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.

Vue router history