register routes

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

@@ -1,20 +1,16 @@
 <template>
   <the-navigation @set-page="setActivePage"></the-navigation>
   <main>
-    <component :is="activePage"></component>
+    <router-view></router-view>
   </main>
 </template>
 
 <script>
-import TeamsList from './components/teams/TeamsList.vue';
-import UsersList from './components/users/UsersList.vue';
 import TheNavigation from './components/nav/TheNavigation.vue';
 
 export default {
   components: {
-    TheNavigation,
-    TeamsList,
-    UsersList,
+    TheNavigation
   },
   data() {
     return {
@@ -22,28 +18,28 @@ export default {
       teams: [
         { id: 't1', name: 'Frontend Engineers', members: ['u1', 'u2'] },
         { id: 't2', name: 'Backend Engineers', members: ['u1', 'u2', 'u3'] },
-        { id: 't3', name: 'Client Consulting', members: ['u4', 'u5'] },
+        { id: 't3', name: 'Client Consulting', members: ['u4', 'u5'] }
       ],
       users: [
         { id: 'u1', fullName: 'Max Schwarz', role: 'Engineer' },
         { id: 'u2', fullName: 'Praveen Kumar', role: 'Engineer' },
         { id: 'u3', fullName: 'Julie Jones', role: 'Engineer' },
         { id: 'u4', fullName: 'Alex Blackfield', role: 'Consultant' },
-        { id: 'u5', fullName: 'Marie Smith', role: 'Consultant' },
-      ],
+        { id: 'u5', fullName: 'Marie Smith', role: 'Consultant' }
+      ]
     };
   },
   provide() {
     return {
       teams: this.teams,
-      users: this.users,
+      users: this.users
     };
   },
   methods: {
     setActivePage(page) {
       this.activePage = page;
-    },
-  },
+    }
+  }
 };
 </script>
 
@@ -59,4 +55,4 @@ html {
 body {
   margin: 0;
 }
-</style>
+</style>

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

@@ -19,8 +19,8 @@ export default {
   methods: {
     setActivePage(page) {
       this.$emit('set-page', page);
-    },
-  },
+    }
+  }
 };
 </script>
 
@@ -65,4 +65,4 @@ button:active {
   border-color: #f1a80a;
   background-color: #1a037e;
 }
-</style>
+</style>

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

@@ -1,9 +1,21 @@
 import { createApp } from 'vue';
+import { createRouter, createWebHistory } from 'vue-router';
 
 import App from './App.vue';
+import TeamsList from './components/teams/TeamsList';
+import UsersList from './components/users/UsersList';
 
 const app = createApp(App);
 
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    { path: '/teams', component: TeamsList },
+    { path: '/users', component: UsersList }
+  ]
+});
+
+app.use(router);
 app.mount('#app');
 
 if (module.hot) {