Next, we create the pages of our application as Vue components ( BusinessPage, CulturePage, etc) to map to our routes. In addition to the page components, we need a Header and Footer components for our application. The folder structure should look like the screenshot below. 

In the routes file below, we do a mapping of our page components to the routes by passing an array of objects to a new instance of vue-router. 

import Vue from "vue";
import Router from "vue-router";
import BusinessPage from "@/components/BusinessPage";
import CulturePage from "@/components/CulturePage";
import EntertainmentPage from "@/components/EntertainmentPage";
import HomePage from "@/components/HomePage";
import SciencePage from "@/components/SciencePage";
import TechnologyPage from "@/components/TechnologyPage";
import VideoPage from "@/components/VideoPage";

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: "/",
      name: "Home",
      component: HomePage
    },
    {
      path: "/business",
      name: "Business",
      component: BusinessPage
    },
    {
      path: "/culture",
      name: "Culture",
      component: CulturePage
    },
    {
      path: "/entertainment",
      name: "Entertainment",
      component: EntertainmentPage
    },
    {
      path: "/science",
      name: "Science",
      component: SciencePage
    },
    {
      path: "/technology",
      name: "Technology",
      component: TechnologyPage
    },
    {
      path: "/videos",
      name: "Video",
      component: VideoPage
    }
  ]
});

In the next section, we will see how each of the components in our route, as well as the header and footer components, are set up.