From 1b73f94b8d54325d0dfb552a31142fc642db155f Mon Sep 17 00:00:00 2001
From: Andreas Zweili <andreas@zweili.ch>
Date: Mon, 26 Apr 2021 21:55:06 +0200
Subject: [PATCH] lesson 176: add name routes

---
 .../src/components/teams/TeamsItem.vue               | 12 ++++++++++--
 2021-03-27_routing-01-starting-setup/src/main.js     |  8 +++++++-
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/2021-03-27_routing-01-starting-setup/src/components/teams/TeamsItem.vue b/2021-03-27_routing-01-starting-setup/src/components/teams/TeamsItem.vue
index d99f6d3..473350d 100644
--- a/2021-03-27_routing-01-starting-setup/src/components/teams/TeamsItem.vue
+++ b/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>
 
diff --git a/2021-03-27_routing-01-starting-setup/src/main.js b/2021-03-27_routing-01-starting-setup/src/main.js
index 5d5b55e..113676b 100644
--- a/2021-03-27_routing-01-starting-setup/src/main.js
+++ b/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 }