Part 3 - Adding a Few Routes To Our App

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.

Video Tutorial

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:

$ vue add router
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y

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:

import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";

Vue.use(Router);

export default new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [
    {
      path: "/",
      name: "home",
      component: Home
    },
    {
      path: "/about",
      name: "about",
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () =>
        import(/* webpackChunkName: "about" */ "./views/About.vue")
    }
  ]
});

Let’s dig in to what is going on here. So on lines 1-2 we should see the imports of the necessary vue and 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 vue-router - 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:

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.svg" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
  </div>
</template>

<script>
  // @ is an alias to /src
  import HelloWorld from "@/components/Homepage.vue";

  export default {
    name: "home",
    components: {
      HelloWorld
    }
  };
</script>

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:

<template>
  <div class="home">
    <h2>Home Page</h2>
  </div>
</template>

<script>
  export default {
    name: "home"
  };
</script>

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:

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view />
  </div>
</template>

<style></style>

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:

<template>
  <div class="pure-menu pure-menu-horizontal">
    <div class="container">
      <router-link to="/" class="pure-menu-heading pure-menu-link"
        >Home</router-link
      >
      <ul class="pure-menu-list">
        <li class="pure-menu-item">
          <router-link class="pure-menu-link" to="/about">About</router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Navbar"
  };
</script>

<style scoped>
  .pure-menu {
    background-color: #e17842;
  }
  .pure-menu a {
    color: white;
  }
</style>

And finally, we’ll update our App.vue component to once again import and render this Navbar.vue component:

<template>
  <div id="app">
    <navbar></navbar>
    <router-view />
  </div>
</template>

<script>
  import Navbar from "@/components/Navbar";
  export default {
    name: "App",
    components: {
      Navbar
    }
  };
</script>

<style></style>

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.

Conclusion

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