Add active status to route links

src/App.vue

@@ -9,8 +9,8 @@
 
             <div class="max-w-2xl mx-auto mt-6">
                 <span class="ml-2" v-for="route in routes" :key="route.path">
-                    <router-link class="inline-block px-3 py-1 rounded text-sm font-medium bg-gray-200 text-gray-700 cursor-pointer hover:bg-gray-700 hover:text-gray-200" :to="route.path">
-                        {{route.name}}
+                    <router-link class="inline-block px-3 py-1 rounded text-sm font-medium cursor-pointer hover:bg-gray-700 hover:text-gray-200" :class="currentPage == route.path ? 'bg-gray-700 text-gray-200' : 'bg-gray-200 text-gray-700'" :to="route.path">
+                        {{ route.name }}
                     </router-link>
                 </span>
             </div>
@@ -40,6 +40,12 @@ export default {
         BackToTop
     },
 
+    computed: {
+        currentPage() {
+            return this.$route.path;
+        }
+    },
+
     data() {
         return {
             routes: this.$router.options.routes,

src/assets/css/app.css

@@ -1,5 +1,4 @@
 @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap');
-/* @import url('https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css'); */
 
 @import "tailwind.css";
 

src/router.js

@@ -11,6 +11,7 @@ const Forms = () =>
 
 
   export default new VueRouter({
+    mode: 'history',
     routes: [
       // { path: '/', redirect: '/alerts' },
       { path: "/alerts", component: Alerts, name: "Alerts" },