Frontend State Management with Vue and Vuex : Setting up the routes for our website.

Setting up the routes for our website.

 

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. 


course logo
Frontend State Management with Vue and Vuex
Number of sections:
15
Content length:
Delivery formats:

Instructor

F Yeboah
I am a Software / UI developer with interests in Search Intensive applications, Information Architectures(IA), UX/UI, FRP, and Reusable Frontend Components Design.... Show more