add router-link

2021-03-27_routing-01-starting-setup/src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <the-navigation @set-page="setActivePage"></the-navigation>
+  <the-navigation></the-navigation>
   <main>
     <router-view></router-view>
   </main>
@@ -14,7 +14,6 @@ export default {
   },
   data() {
     return {
-      activePage: 'teams-list',
       teams: [
         { id: 't1', name: 'Frontend Engineers', members: ['u1', 'u2'] },
         { id: 't2', name: 'Backend Engineers', members: ['u1', 'u2', 'u3'] },
@@ -34,11 +33,6 @@ export default {
       teams: this.teams,
       users: this.users
     };
-  },
-  methods: {
-    setActivePage(page) {
-      this.activePage = page;
-    }
   }
 };
 </script>

2021-03-27_routing-01-starting-setup/src/components/nav/TheNavigation.vue

@@ -3,27 +3,16 @@
     <nav>
       <ul>
         <li>
-          <button @click="setActivePage('teams-list')">Teams</button>
+          <router-link to="/teams">Teams</router-link>
         </li>
         <li>
-          <button @click="setActivePage('users-list')">Users</button>
+          <router-link to="/users">Users</router-link>
         </li>
       </ul>
     </nav>
   </header>
 </template>
 
-<script>
-export default {
-  emits: ['set-page'],
-  methods: {
-    setActivePage(page) {
-      this.$emit('set-page', page);
-    }
-  }
-};
-</script>
-
 <style scoped>
 header {
   width: 100%;
@@ -49,8 +38,8 @@ li {
   margin: 0 2rem;
 }
 
-button {
-  font: inherit;
+a {
+  text-decoration: none;
   background: transparent;
   border: 1px solid transparent;
   cursor: pointer;
@@ -59,8 +48,9 @@ button {
   display: inline-block;
 }
 
-button:hover,
-button:active {
+a:hover,
+a:active,
+a.router-link-active {
   color: #f1a80a;
   border-color: #f1a80a;
   background-color: #1a037e;

2021-03-27_routing-01-starting-setup/src/components/users/UsersList.vue

@@ -1,6 +1,12 @@
 <template>
+  <button @click="confirmInput">Confirm</button>
   <ul>
-    <user-item v-for="user in users" :key="user.id" :name="user.fullName" :role="user.role"></user-item>
+    <user-item
+      v-for="user in users"
+      :key="user.id"
+      :name="user.fullName"
+      :role="user.role"
+    ></user-item>
   </ul>
 </template>
 
@@ -9,9 +15,15 @@ import UserItem from './UserItem.vue';
 
 export default {
   components: {
-    UserItem,
+    UserItem
   },
   inject: ['users'],
+  methods: {
+    confirmInput() {
+      console.log('fo');
+      this.$router.push('/teams');
+    }
+  }
 };
 </script>
 
@@ -22,4 +34,4 @@ ul {
   max-width: 20rem;
   padding: 0;
 }
-</style>
+</style>