Replace vue's buggy .router-link-exact-active

Details of the still-open issue are found here: vuejs/vue-router#2040 I used the exact hack recommended in there even though I hate how it looks. At least it's functioning correctly now.
lekha · Sep 7, 2020 · e10e6fc · e10e6fc
1 parent 5d95385
commit e10e6fc
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/frontend/src/css/base.scss b/frontend/src/css/base.scss
@@ -146,7 +146,7 @@ h2 {
     padding: 15px 30px;
   }
 
-  .router-link-exact-active {
+  .router-link-active.exact {
     background-color: $primary-light;
     color: #000;
     display: block;

diff --git a/frontend/src/layouts/Base.vue b/frontend/src/layouts/Base.vue
@@ -28,7 +28,14 @@
     <div class="body">
       <div class="sidebar">
         <ul>
-          <li><router-link :to="{ name: 'Home' }">Questions</router-link></li>
+          <li>
+            <router-link
+              :to="{ name: 'Home' }"
+              :class="{ exact: $route.name === 'Home'}"
+            >
+              Questions
+            </router-link>
+          </li>
           <li><a>Tags</a></li>
           <li><a>Users</a></li>
         </ul>