I've opened up the source code in my editor. Let's take a look around and see what Vue CLI gave us out of the box. The source directory is where we'll write all the code that powers our app. The assets directory is where we put all of our assets that need processing, such as images.
Static assets that can be served as is go into the public directory. The components directory is where we can store all of our view components, except for page components. For now, we only have the default hello world component. In the views folder, we put all the components that are individual pages.
Pages are oftentimes called views. The about and home component are pages and the home page imports the hello world component. js. Here is where we can see the router being installed and used.
First, we have an array that defines all the routes for our application. Each route is made up of an object known as a route record. The first route record we have has the path of slash which will be the base URL. The name for this route is home and the component it refers to is the home component which is imported above.
We also have an about route that goes to the path about and has the name about. Instead of the component being imported like the home component above, we see what's called a dynamic import being used. We'll look more into dynamic imports in a future lesson. At the bottom of this file, we see the create router function being called.
This creates the router instance for our application. There are several different options you can pass here to configure router in any way you'd like. But for now, we're keeping it simple. We just pass it our routes and a history mode.
We'll dig into what the history mode is a little more in a later lesson. v file. We can see here that we have two router link tags which link to the home page and the about page and a router view tag. 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're doing is changing the view of that single page. So without router view, we cannot change our views. Basically, router view always renders the content of the active page.
This means that when a user visits the homepage, the router view will render the contents of our homepage. 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.
Well, let's see what happens when we click the link created by router link compared with the a tag. Clicking the link created by the router link changes our page, but doesn't actually refresh the whole page in the browser. But clicking the link with the A tag completely refreshes the page. With a single page application, we make smaller requests to fetch only the data that changes.
While regular websites, we need to refetch everything, styles, logos, scripts, et cetera. By not having to refetch everything, SPAs are faster when it comes to page changes. This is why we don't want the entire page to reload. So how does router link work exactly?
Let's open the dev tools and see the difference between them. You will notice that we have no router link, only A tags. That is because router converts all router links to A tags under the hood. So why should we even use the router link if it's the same?
because router link will intercept the click event so that browsers won'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.