Now that we know our way around the code base, let's install Vue Router. Vue Router is available via a CDN link or as an NPM package. We'll install it via NPM. VS Code has a built-in terminal that I'll use whenever I need to run any commands.
I can open it now by pressing Control-Tick. and then type npm install view-router at four dash dash save. js file by importing the createRouter function and passing it some options. The first option we should provide is History.
I'll import Create Web History from View Router and use it here. We'll talk more about what this actually does in a later lesson. Next, we'll provide the Routes option. This is where we'll define our routes.
We don't have any routes yet, so let's just provide an empty array. use on the view application instance. That takes care of the setup. Let's get to creating some routes.
Routes are defined by providing what's known as a route record to the routes array. Route records are simply objects with some predefined keys that mean special things to ViewRouter. Let's create a route record for a home page and an about page. For the home page route, we have the path of slash, which will be the root URL.
We'll give it the name of home. And tell the router to render the home component when the home route is visited. For this to actually work, we'll need a home component to render. We can do that with a single file component in the views directory.
js with the same name as we passed to the component property. You might not think that adding the dot view extension for the import here is necessary. But for this to work with Vite, it is. Vite is designed that way in order to best provide support for TypeScript and IDE IntelliSense.
Let's do the same for about. The path here will be slash about. com slash about, we want to show them the about page component. The name will be about, and it will use the about page component.
We'll go ahead and import the about page component. and create it. Now, if we visit the site in the browser, you might expect to see the homepage rendered with the word home. vue file.
This is because we need to tell ViewRouter where we want the Home component to show up. We can do that with the RouterView component. Basically, RouterView always renders the content of the active page. This means that when a user visits the home page, the router view will render the contents of our home page component.
Then, if the user visits the about page, router view will render the contents of the about page. The router view component is a functional component that renders the matched component for the given path. view is our single page. And really, all we are doing is changing the view of that single page.
So without router view, we cannot change our views. There, that's more like it. We can also link between the two pages with router link components. Router link is the component for enabling user navigation in a router enabled app.
But couldn't we just use an a tag instead? Let's take a look. Let's add an a tag to our app dot view and then test it out. I'll also add a few pipes between our links just so they're separated a little bit better.
Let's see what happens when we click the link created by router link compared with the a tag. Clicking the link created by router link changes our page and doesn't refresh the page. But clicking the link with the A tag completely refreshes the page, and we really don't want that. With a single page application, we make smaller requests to fetch only the data that changes.
While with regular websites, we need to refetch everything. Styles, logo, scripts, etc. This way, SPAs are faster when it comes to page changes. This is why we don't want to reload the entire page.
So, how does RouterLink work exactly? Let's open the dev tools and see the difference between them. You will notice that we have no RouterLink tags, only A tags. That is because the router converts all RouterLink tags to A tags.
So why should we even use the router link if it's the same? Well, because router link will intercept the click event so that the browser doesn't try to reload the page. Generally, we use the router link tag for any internal links and we use the A tag for any external links. vue and remove the A tag from our code.
The last thing I'd like to do in this lesson is extract the router setup to its own file so that it's more organized and self-contained. This is common practice for Vue router. js file. js that sets up the router.
js. At this point, the use statement that's already in place will work just as it did previously. Lastly, we'll assign the routes to their own dedicated variable called routes, and then reference that variable in the create router options via the object property shorthand. This just makes the routes a priority visually, which is important because the routes are what's going to change most often when we visit this file.
Also, this makes the file consistent with the format in the Vue Router docs. In the next couple lessons, we'll use the Vue CLI to create the project just as we did in these few lessons. The Vue CLI is a more traditional and alternative approach to starting the project. Vite is the newer of the two tools and boasts a better development experience by way of faster recompile times.
If you're not interested in the Vue CLI, you can skip the next two lessons and pick up on the adding routes and content lesson.