Vue.js 2 Web Development Projects

Routing

Let's add some routing to the app; we will have two pages--the dashboard with indicators and a page with buttons to generate fake data:

1. In the client/components folder, create two new components--ProductionGenerator.vue and ProductionDashboard.vue.
2. Next to the main.js file, create the router in a router.js file:

      import Vue from 'vue'      import VueRouter from 'vue-router'      import ProductionDashboard from       './components/ProductionDashboard.vue'      import ProductionGenerator from       './components/ProductionGenerator.vue'      Vue.use(VueRouter)      const routes = [        { path: '/', name: 'dashboard', component: ProductionDashboard         },        { path: '/generate', name: 'generate',          component: ProductionGenerator },      ]      const router = new VueRouter({ mode: 'history', ...