I want to take a quick moment to talk about Vue Router's history mode. js, you can see that one of the options we can provide to Vue Router is called history. We have create web history pre-filled in here for us because we chose to use web history during the setup with the Vue CLI, or because that's just what I told you to provide in the Vite setup. If we had declined to use the web history, this would instead say create web hash history.
What's the difference between the two? Let's take a look at the browser and see how the URL behaves with create web history. You'll see that visiting the Brazil page results in a URL that has slash Brazil in it. Under the hood, Vue Router is using the HTML five history API to produce URLs that look normal.
And thus Vue Router dubs this HTML five mode. Now let's change it out to create web hash history and see what happens. You notice we now have a hashtag symbol in the URL, hence why this mode is commonly called hash mode. This is common practice in single page applications.
The purpose of hash mode is to imitate a file path without having to set up any special server configurations. Remember, we're making a single-page application. It's an application with one page, or file to be specific, and the navigation does not work in the same way as traditional server-side apps do. To get the HTML five mode to work, we would need to configure our server to send all routes to our only entry point.
html file living in a directory called shoes that lives in a directory called Nike that lives in a directory called brands. But in order for HTML five mode to work with a single page application, we would want the traffic to all go to a single entry point on the server and not look for the files nested in those directories. So using hash mode allows us to not have to set up our server to handle that single entry point. There are downsides to hash mode though.
Most apparently, it is kind of ugly. More importantly, it does have a bad impact on SEO. So what do we do here? Thankfully, most servers have a simple way to support an actual path for SPAs these days.
You can visit the Vue router docs in the links below to get examples of how to configure a number of popular servers. Also, our dev server for the project provided by Vue CLI or Vite, depending on which route you chose to take, can handle it just fine. So let's go ahead and change it back to HTML five mode.