Feat(Router): create all pages

src/App.vue

@@ -19,16 +19,4 @@ export default {
 #app {
   text-align: center;
 }
-#nav {
-  padding: 30px;
-}
-
-#nav a {
-  font-weight: bold;
-  color: #2c3e50;
-}
-
-#nav a.router-link-exact-active {
-  color: #42b983;
-}
 </style>

src/components/navbar.vue

@@ -1,15 +1,14 @@
 <template>
   <b-navbar toggleable="md" variant="light">
-
     <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
 
-    <b-navbar-brand href="#">
+    <b-navbar-brand :to="{ name: 'home'}">
-      <font-awesome-icon icon="file-invoice-dollar" />
+      <font-awesome-icon icon="file-invoice-dollar" /> Comptes
     </b-navbar-brand>
 
     <b-collapse is-nav id="nav_collapse">
       <b-navbar-nav>
-        <b-nav-item :to="{ name: 'home' }">Comptes</b-nav-item>
+        <b-nav-item :to="{ name: 'analysis' }">Analyse</b-nav-item>
         <b-nav-item :to="{ name: 'import' }">Import</b-nav-item>
         <b-nav-item :to="{ name: 'postes' }">Postes</b-nav-item>
       </b-navbar-nav>
@@ -27,4 +26,15 @@ export default {
 </script>
 
 <style scoped>
+.navbar {
+}
+
+.navbar a {
+  color: #dc3545;
+}
+
+.navbar a.router-link-exact-active {
+  font-weight: bold;
+  color: #42b983;
+}
 </style>

src/router.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import Home from './views/Home.vue'
+import home from './views/Home.vue'
 
 Vue.use(Router)
 
@@ -9,7 +9,15 @@ export default new Router({
     {
       path: '/',
       name: 'home',
-      component: Home
+      component: home
+    },
+    {
+      path: '/analysis',
+      name: 'analysis',
+      // route level code-splitting
+      // this generates a separate chunk (import.[hash].js) for this route
+      // which is lazy-loaded when the route is visited.
+      component: () => import(/* webpackChunkName: "import" */ './views/analysis.vue')
     },
     {
       path: '/import',

src/views/analysis.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="import">
+    <h1>Analyse</h1>
+  </div>
+</template>