我们创建的Vue App是单页面的程序,使用Routing可以实现看上去像是多页面,提升用户体验度。
示例
components/nav/
TheNavigation.vue
<template>
<header>
<nav>
<ul>
<li>
<button @click="setActivePage('teams-list')">Teams</button>
</li>
<li>
<button @click="setActivePage('users-list')">Users</button>
</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%;
height: 5rem;
background-color: #11005c;
}
nav {
height: 100%;
}
ul {
list-style: none;
margin: 0;
padding: 0;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
li {
margin: 0 2rem;
}
button {
font: inherit;
background: transparent;
border: 1px solid transparent;
cursor: pointer;
color: white;
padding: 0.5rem 1.5rem;
display: inline-block;
}
button:hover,
button:active {
color: #f1a80a;
border-color: #f1a80a;
background-color: #1a037e;
}
</style>
components/teams
TeamsItem.vue
<template>
<li>
<h3>{{ name }}</h3>
<div class="team-members">{{ memberCount }} Members</div>
<a href="#">View Members</a>
</li>
</template>
<script>
export default {
props: ['name', 'memberCount'],
};
</script>
<style scoped>
li {
margin: 1rem 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
border-radius: 12px;
padding: 1rem;
}
li h3 {
margin: 0.5rem 0;
font-size: 1.25rem;
}
li .team-members {
margin: 0.5rem 0;
}
a {
text-decoration: none;
color: white;
display: inline-block;
padding: 0.5rem 1.5rem;
background-color: #11005c;
}
a:hover,
a:active {
background-color: #220a8d;
}
</style>
TeamsList.vue
<template>
<ul>
<teams-item
v-for="team in teams"
:key="team.id"
:name="team.name"
:member-count="team.members.length"
></teams-item>
</ul>
</template>
<script>
import TeamsItem from './TeamsItem.vue';
export default {
components: {
TeamsItem,
},
inject: ['teams'],
};
</script>
<style scoped>
ul {
list-style: none;
margin: 2rem auto;
max-width: 40rem;
padding: 0;
}
</style>
TeamMembers.vue
<template>
<section>
<h2>{{ teamName }}</h2>
<ul>
<user-item
v-for="member in members"
:key="member.id"
:name="member.fullName"
:role="member.role"
></user-item>
</ul>
</section>
</template>
<script>
import UserItem from '../users/UserItem.vue';
export default {
components: {
UserItem
},
data() {
return {
teamName: 'Test',
members: [
{ id: 'u1', fullName: 'Max Schwarz', role: 'Engineer' },
{ id: 'u2', fullName: 'Max Schwarz', role: 'Engineer' },
],
};
},
};
</script>
<style scoped>
section {
margin: 2rem auto;
max-width: 40rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
padding: 1rem;
border-radius: 12px;
}
h2 {
margin: 0.5rem 0;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
</style>
components/users
UserItem.vue
<template>
<li>
<h3>{{ name }}</h3>
<div class="role" :class="roleClass">{{ role }}</div>
</li>
</template>
<script>
export default {
props: ['name', 'role'],
computed: {
roleClass() {
if (this.role === 'Engineer') {
return 'role--engineer';
}
if (this.role === 'Consultant') {
return 'role--consultant';
}
return null;
},
},
};
</script>
<style scoped>
li {
margin: 1rem 0;
border: 1px solid #ccc;
padding: 1rem;
}
h3 {
margin: 0.5rem 0;
}
.role {
border-radius: 40px;
background-color: #ccc;
color: #252525;
padding: 0.25rem 1rem;
display: inline-block;
}
.role--engineer {
background-color: blue;
color: white;
}
.role--consultant {
background-color: #af003a;
color: white;
}
</style>
UsersList.vue
<template>
<ul>
<user-item v-for="user in users" :key="user.id" :name="user.fullName" :role="user.role"></user-item>
</ul>
</template>
<script>
import UserItem from './UserItem.vue';
export default {
components: {
UserItem,
},
inject: ['users'],
};
</script>
<style scoped>
ul {
list-style: none;
margin: 2rem auto;
max-width: 20rem;
padding: 0;
}
</style>
main.js
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App)
app.mount('#app');
App.vue
<template>
<the-navigation @set-page="setActivePage"></the-navigation>
<main>
<component :is="activePage"></component>
</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,
},
data() {
return {
activePage: 'teams-list',
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'] },
],
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' },
],
};
},
provide() {
return {
teams: this.teams,
users: this.users,
};
},
methods: {
setActivePage(page) {
this.activePage = page;
},
},
};
</script>
<style>
* {
box-sizing: border-box;
}
html {
font-family: sans-serif;
}
body {
margin: 0;
}
</style>