lesson 176: add name routes

2021-03-27_routing-01-starting-setup/src/components/teams/TeamsItem.vue

@@ -2,13 +2,21 @@
   <li>
     <h3>{{ name }}</h3>
     <div class="team-members">{{ memberCount }} Members</div>
-    <router-link :to="'/teams/' + id">View Members</router-link>
+    <router-link :to="teamMembersLink">View Members</router-link>
   </li>
 </template>
 
 <script>
 export default {
-  props: ['id', 'name', 'memberCount']
+  props: ['id', 'name', 'memberCount'],
+  computed: {
+    teamMembersLink() {
+      return {
+        name: 'team-members',
+        params: { teamId: this.id }
+      };
+    }
+  }
 };
 </script>
 

2021-03-27_routing-01-starting-setup/src/main.js

@@ -13,10 +13,16 @@ const router = createRouter({
   routes: [
     { path: '/', component: TeamsList },
     {
+      name: 'teams',
       path: '/teams',
       component: TeamsList,
       children: [
-        { path: ':teamId', component: TeamMembers, props: true }
+        {
+          name: 'team-members',
+          path: ':teamId',
+          component: TeamMembers,
+          props: true
+        }
       ]
     },
     { path: '/users', component: UsersList }