In the previous tutorial of this series, we covered single page components and how you could build your own components and subsequently render them within your Vue.js application. We created a simple
Navbar component and registered it within our
App.vue component and subsequently rendered it within our application.
In this tutorial, we are going to be creating a few more single-page components and setting up a
vue-router so that we can navigate between different views on our site. This will enable us to view the Top Stories on our
/ path, we’ll then be expanding upon these routes as we progress through the rest of this series and start adding more components.
This tutorial is available in a video format, should you wish to support the series then you can by subscribing to my channel and liking the video!
Setting Up Our Vue Router
With the new version of the
vue-cli we’ll have to first add the router to our project before we can go about setting up routes. We can do that like so:
Now, this is going to modify some of our existing files and the structure of some of our components. But don’t worry, these changes actually simplify things for us in the long run.
You should notice that a new file called
src/router.js has been created for us. It is within this file that we’ll define the various routes for our application and it should look like this initially:
Let’s dig in to what is going on here. So on lines
1-2 we should see the imports of the necessary
vue-router packages. Below that however, it will have imported the
Home view from a newly generated
src/views/Home.vue component file.
It is within this generated file that we’ll be displaying the top articles that you would traditionally see on the homepage of HackerNews.
Finally, we tell our Vue application to use the
router before then creating a new
Router which contains all of ours applications routes.
Each of our routes is a combination of a path, the name of our path, and the component we wish to render when we hit this path. Should we wish, we can also do cool stuff such as dynamic route matching which we will cover in more detail in part 5 of this project.
For more information our VueJS routing check out the official documentation or my tutorial: VueJS Routing Tutorial
Modifying our Home.vue View Component
Now, the autogenerated
Home.vue component will look a little something like this:
We’ll want to modify it ever so slightly to remove the import of the
HelloWorld component and just render
Home Page for now like so:
If you now have a look at the
App.vue component, you should see that our
Navbar component has been removed by the
vue cli. It has instead been replaced by the following:
The newly added
<router-link> components essentially act as anchor tags within our VueJS application. It’s the job of the
<router-view/> component to render the appropriate component for the current path within the application.
So, if we are on the homepage of our application, or
/, we’ll want to display our
Home.vue component. If we are on
/about, then the
<router-view/> component will show the
About.vue component that has been automatically generated for us.
Updating our Navbar.vue Component
Let’s steal the new
<router-link> components from our
App.vue file and place them within our
src/components/Navbar.vue component file that we created earlier on in the series:
And finally, we’ll update our
App.vue component to once again import and render this
Awesome, now when we navigate back our browser and view
http://localhost:8080/#/, you should now see our Homepage
<h2>Homepage</h2> being rendered in all its glory.
In this tutorial, we managed to create a few more components within our Vue.js application and set up the
vue router which enables us to navigate between different components with ease. Currently, this only renders the one route, but in the next couple of tutorials, we will be using this to dynamically render our components depending on the user’s location within our application.
In the next tutorial, we are going to look at how we can extend this
Homepage.vue component so that it starts hitting the HackerNews API and starts to retrieve all of the Top Stories currently trending on the site. You can find that tutorial here: Part 4 - Hitting an API