add router-link
This commit is contained in:
parent
7ce7a02873
commit
2dfcea33cf
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<the-navigation @set-page="setActivePage"></the-navigation>
|
<the-navigation></the-navigation>
|
||||||
<main>
|
<main>
|
||||||
<router-view></router-view>
|
<router-view></router-view>
|
||||||
</main>
|
</main>
|
||||||
|
@ -14,7 +14,6 @@ export default {
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
activePage: 'teams-list',
|
|
||||||
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'] },
|
||||||
|
@ -34,11 +33,6 @@ export default {
|
||||||
teams: this.teams,
|
teams: this.teams,
|
||||||
users: this.users
|
users: this.users
|
||||||
};
|
};
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
setActivePage(page) {
|
|
||||||
this.activePage = page;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -3,27 +3,16 @@
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<button @click="setActivePage('teams-list')">Teams</button>
|
<router-link to="/teams">Teams</router-link>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<button @click="setActivePage('users-list')">Users</button>
|
<router-link to="/users">Users</router-link>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
emits: ['set-page'],
|
|
||||||
methods: {
|
|
||||||
setActivePage(page) {
|
|
||||||
this.$emit('set-page', page);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
header {
|
header {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -49,8 +38,8 @@ li {
|
||||||
margin: 0 2rem;
|
margin: 0 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
a {
|
||||||
font: inherit;
|
text-decoration: none;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
@ -59,8 +48,9 @@ button {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
button:hover,
|
a:hover,
|
||||||
button:active {
|
a:active,
|
||||||
|
a.router-link-active {
|
||||||
color: #f1a80a;
|
color: #f1a80a;
|
||||||
border-color: #f1a80a;
|
border-color: #f1a80a;
|
||||||
background-color: #1a037e;
|
background-color: #1a037e;
|
||||||
|
|
|
@ -1,6 +1,12 @@
|
||||||
<template>
|
<template>
|
||||||
|
<button @click="confirmInput">Confirm</button>
|
||||||
<ul>
|
<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>
|
</ul>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -9,9 +15,15 @@ import UserItem from './UserItem.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
UserItem,
|
UserItem
|
||||||
},
|
},
|
||||||
inject: ['users'],
|
inject: ['users'],
|
||||||
|
methods: {
|
||||||
|
confirmInput() {
|
||||||
|
console.log('fo');
|
||||||
|
this.$router.push('/teams');
|
||||||
|
}
|
||||||
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -22,4 +34,4 @@ ul {
|
||||||
max-width: 20rem;
|
max-width: 20rem;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Reference in New Issue