correct route url and active state for profile child vues

fix gothinkster#32
reshaelfianur · Nov 30, 2017 · 044d073 · 044d073
1 parent 318b7e2
commit 044d073
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 10 deletions.
diff --git a/src/router/index.js b/src/router/index.js
@@ -35,22 +35,21 @@ export default new Router({
       path: '/settings',
       component: RwvSettings
     },
+    // Handle child routes with a default, by giving the name to the
+    // child.
+    // SO: https://github.com/vuejs/vue-router/issues/777
     {
-      name: 'profile',
       path: '/@:username',
       component: RwvProfile,
-      redirect: {
-        name: 'profile-articles'
-      },
       children: [
         {
-          name: 'profile-articles',
-          path: 'articles',
+          path: '',
+          name: 'profile',
           component: RwvProfileArticles
         },
         {
-          name: 'profile-favorited',
-          path: 'favorited',
+          name: 'profile.favorites',
+          path: 'favorites',
           component: RwvProfileFavorited
         }
       ]

diff --git a/src/views/Profile.vue b/src/views/Profile.vue
@@ -40,12 +40,20 @@
           <div class="articles-toggle">
             <ul class="nav nav-pills outline-active">
               <li class="nav-item">
-                <router-link class="nav-link" active-class="active" :to="{ name: 'profile-articles' }">
+                <router-link
+                  class="nav-link"
+                  active-class="active"
+                  exact
+                  :to="{ name: 'profile' }">
                   My Articles
                 </router-link>
               </li>
               <li class="nav-item">
-                <router-link class="nav-link" active-class="active" :to="{ name: 'profile-favorited' }">
+                <router-link
+                  class="nav-link"
+                  active-class="active"
+                  exact
+                  :to="{ name: 'profile.favorites' }">
                   Favorited Articles
                 </router-link>
               </li>