Let's take a look at the code to see what we have installed. Using the GUI, click on your project name and click open an editor. Or go to the project manager and click the open an editor button. The Vue CLI has now scaffold a new project for us.
The benefit of using such tools is that we get suggestions on how to organize and structure our applications that adhere to the community standards. Let's take a look at the source directory to see how everything is set up. The assets folder is where we put all our assets, like images such as the logo. Later, we will put our travel app images in here.
In the components folder, we put all our components, except for our 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 often called views.
The About and Home component are pages, and the home page imports the Hello World component. In our main JS file, we can see how the router is being imported. js. In this file, we import view from view and router from view router.
We then tell view to use the router. Next, we export all the routes. The first route 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 we imported above.
We also have an about route. that goes to the path about, with the name about. And the component, instead of being imported above like the home, we added using Webpack's code splitting feature, which we will take a look at in a future lesson. view file is what we are really interested in.
We can see here 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 are 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 home page, the router view will render the contents of our homepage. Then if the user visits the About page, RouterView will render the contents of the About page. RouterLink is the component for enabling user navigation in a router-enabled app.
But could we just use an A tag instead? Let's take a look. view and then test it out. Well, let's see what happens when we click the link created by RouterLink compared with the A tag.
Clicking the link created by the 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, single page applications are faster when it comes to page changes. This is why we don't want the entire page to reload. So how does the router link work exactly? Let's open the DevTools and see the difference between them.
You will notice that we have no router link, only A tags. That is because the router converts all router link tags to A tags. We can also see from the view DevTools that if we click on the router link, it shows us what tag it is. Tag A.
So why should we even use the router link if it is the same? 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. view and remove the a tag from our code.
Let's take a look at the code to see what we have installed. Using the GUI, click on your project name and click open an editor. Or go to the project manager and click the open an editor button. The Vue CLI has now scaffold a new project for us.
The benefit of using such tools is that we get suggestions on how to organize and structure our applications that adhere to the community standards. Let's take a look at the source directory to see how everything is set up. The assets folder is where we put all our assets, like images such as the logo. Later, we will put our travel app images in here.
In the components folder, we put all our components, except for our 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 often called views.
The About and Home component are pages, and the home page imports the Hello World component. In our main JS file, we can see how the router is being imported. js. In this file, we import view from view and router from view router.
We then tell view to use the router. Next, we export all the routes. The first route 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 we imported above.
We also have an about route. that goes to the path about, with the name about. And the component, instead of being imported above like the home, we added using Webpack's code splitting feature, which we will take a look at in a future lesson. view file is what we are really interested in.
We can see here 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 are 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 home page, the router view will render the contents of our homepage. Then if the user visits the About page, RouterView will render the contents of the About page. RouterLink is the component for enabling user navigation in a router-enabled app.
But could we just use an A tag instead? Let's take a look. view and then test it out. Well, let's see what happens when we click the link created by RouterLink compared with the A tag.
Clicking the link created by the 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, single page applications are faster when it comes to page changes. This is why we don't want the entire page to reload. So how does the router link work exactly? Let's open the DevTools and see the difference between them.
You will notice that we have no router link, only A tags. That is because the router converts all router link tags to A tags. We can also see from the view DevTools that if we click on the router link, it shows us what tag it is. Tag A.
So why should we even use the router link if it is the same? 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. view and remove the a tag from our code.