made a better router logic

src/App.vue

@@ -1,5 +1,7 @@
 <template>
   <div id="app">
+
+
     <div id="content" :class="{ collapsed: isCollapsed }">
       <Header></Header>
       <div>
@@ -22,7 +24,7 @@ export default {
   name: "app",
   data(){
     return {
-      isCollapsed: false
+      isCollapsed: false,
     }
   },
   components:{

src/components/Login.vue

@@ -5,6 +5,49 @@
     <input type="password" name="password" v-model="input.password" placeholder="Password">
     <button type="button" v-on:click="login()">Login</button>
   </div>
+
+<!-- <section class="hero is-primary is-fullheight">
+  <div class="hero-body">
+    <div class="container">
+      <div class="columns is-centered">
+        <div class="column is-5-tablet is-4-desktop is-3-widescreen">
+          <form action="" class="box">
+            <div class="field">
+              <label for="" class="label">Email</label>
+              <div class="control has-icons-left">
+                <input type="email" placeholder="e.g. bobsmith@gmail.com" class="input" required>
+                <span class="icon is-small is-left">
+                  <i class="fa fa-envelope"></i>
+                </span>
+              </div>
+            </div>
+            <div class="field">
+              <label for="" class="label">Password</label>
+              <div class="control has-icons-left">
+                <input type="password" placeholder="*******" class="input" required>
+                <span class="icon is-small is-left">
+                  <i class="fa fa-lock"></i>
+                </span>
+              </div>
+            </div>
+            <div class="field">
+              <label for="" class="checkbox">
+                <input type="checkbox">
+               Remember me
+              </label>
+            </div>
+            <div class="field">
+              <button class="button is-success">
+                Login
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+</section> -->
+
 </template>
 
 <script>

src/components/layout/Menu.vue

@@ -21,7 +21,7 @@ import '@fortawesome/fontawesome-free/css/all.css'
                         hiddenOnCollapse: true
                     },
                     {
-                        href: { path: '/' },
+                        href: { path: '/home' },
                         title: 'Home',
                         icon: 'fa fa-home'
                     },

src/router/index.js

@@ -3,14 +3,17 @@ import VueRouter from 'vue-router'
 import Login from '../components/Login.vue'
 import Home from '../components/Home.vue'
 import store from '../store/index.js'
-
 Vue.use(VueRouter)
-  const routes = [
+
+  const router = new VueRouter({
+    mode: 'history',
+    base: process.env.BASE_URL,
+    routes: [
   {
     path: '/',
-    redirect: {
-      name: "login"
-    }
+    name: "home",
+    component: Home,
+    meta: {requiresAuth: true}
   },
   {
     path: '/login',
@@ -22,20 +25,26 @@ Vue.use(VueRouter)
     path: '/home',
     name: "home",
     component: Home,
-    beforeRouteEnter: (to, from, next) => {
-      if(store.state.authenticated == false) {
-        next(false);
-        //Dont go to route
-      } else {
-          next();
-          //Allow to route
-      }
-    }
+    meta: {requiresAuth: true}
   }
-]
+]});
+
+router.beforeEach( (to,from,next) => {
+  let routerAuthCheck = store.state.authenticated;
+
+  if (to.matched.some(record => record.meta.requiresAuth)) {
+    if(routerAuthCheck){
+      next();
+    } else {
+      router.replace('/login')
+    }
+
+  } else {
+    //allows routing
+    next();
+  }
+});
+
 
-const router = new VueRouter({
-  routes
-})
 
 export default router