register routes
This commit is contained in:
parent
a51525d485
commit
7ce7a02873
|
@ -1,20 +1,16 @@
|
||||||
<template>
|
<template>
|
||||||
<the-navigation @set-page="setActivePage"></the-navigation>
|
<the-navigation @set-page="setActivePage"></the-navigation>
|
||||||
<main>
|
<main>
|
||||||
<component :is="activePage"></component>
|
<router-view></router-view>
|
||||||
</main>
|
</main>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import TeamsList from './components/teams/TeamsList.vue';
|
|
||||||
import UsersList from './components/users/UsersList.vue';
|
|
||||||
import TheNavigation from './components/nav/TheNavigation.vue';
|
import TheNavigation from './components/nav/TheNavigation.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
TheNavigation,
|
TheNavigation
|
||||||
TeamsList,
|
|
||||||
UsersList,
|
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
@ -22,28 +18,28 @@ export default {
|
||||||
teams: [
|
teams: [
|
||||||
{ id: 't1', name: 'Frontend Engineers', members: ['u1', 'u2'] },
|
{ id: 't1', name: 'Frontend Engineers', members: ['u1', 'u2'] },
|
||||||
{ id: 't2', name: 'Backend Engineers', members: ['u1', 'u2', 'u3'] },
|
{ 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: [
|
users: [
|
||||||
{ id: 'u1', fullName: 'Max Schwarz', role: 'Engineer' },
|
{ id: 'u1', fullName: 'Max Schwarz', role: 'Engineer' },
|
||||||
{ id: 'u2', fullName: 'Praveen Kumar', role: 'Engineer' },
|
{ id: 'u2', fullName: 'Praveen Kumar', role: 'Engineer' },
|
||||||
{ id: 'u3', fullName: 'Julie Jones', role: 'Engineer' },
|
{ id: 'u3', fullName: 'Julie Jones', role: 'Engineer' },
|
||||||
{ id: 'u4', fullName: 'Alex Blackfield', role: 'Consultant' },
|
{ id: 'u4', fullName: 'Alex Blackfield', role: 'Consultant' },
|
||||||
{ id: 'u5', fullName: 'Marie Smith', role: 'Consultant' },
|
{ id: 'u5', fullName: 'Marie Smith', role: 'Consultant' }
|
||||||
],
|
]
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
provide() {
|
provide() {
|
||||||
return {
|
return {
|
||||||
teams: this.teams,
|
teams: this.teams,
|
||||||
users: this.users,
|
users: this.users
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
setActivePage(page) {
|
setActivePage(page) {
|
||||||
this.activePage = page;
|
this.activePage = page;
|
||||||
},
|
}
|
||||||
},
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -59,4 +55,4 @@ html {
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -19,8 +19,8 @@ export default {
|
||||||
methods: {
|
methods: {
|
||||||
setActivePage(page) {
|
setActivePage(page) {
|
||||||
this.$emit('set-page', page);
|
this.$emit('set-page', page);
|
||||||
},
|
}
|
||||||
},
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -65,4 +65,4 @@ button:active {
|
||||||
border-color: #f1a80a;
|
border-color: #f1a80a;
|
||||||
background-color: #1a037e;
|
background-color: #1a037e;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -1,9 +1,21 @@
|
||||||
import { createApp } from 'vue';
|
import { createApp } from 'vue';
|
||||||
|
import { createRouter, createWebHistory } from 'vue-router';
|
||||||
|
|
||||||
import App from './App.vue';
|
import App from './App.vue';
|
||||||
|
import TeamsList from './components/teams/TeamsList';
|
||||||
|
import UsersList from './components/users/UsersList';
|
||||||
|
|
||||||
const app = createApp(App);
|
const app = createApp(App);
|
||||||
|
|
||||||
|
const router = createRouter({
|
||||||
|
history: createWebHistory(),
|
||||||
|
routes: [
|
||||||
|
{ path: '/teams', component: TeamsList },
|
||||||
|
{ path: '/users', component: UsersList }
|
||||||
|
]
|
||||||
|
});
|
||||||
|
|
||||||
|
app.use(router);
|
||||||
app.mount('#app');
|
app.mount('#app');
|
||||||
|
|
||||||
if (module.hot) {
|
if (module.hot) {
|
||||||
|
|
Reference in New Issue