Nuxt/examples/nested-routes/pages/index.vue

72 lines
1.2 KiB
Vue
Raw Normal View History

2017-01-26 14:22:10 +00:00
<template>
<div class="container">
<div class="left">
<h2><nuxt-link to="/">Players</nuxt-link></h2>
<ul class="players">
<li v-for="user in users">
<nuxt-link :to="'/'+user.id">{{ user.name }}</nuxt-link>
</li>
</ul>
</div>
<div class="right">
2017-08-01 13:54:29 +00:00
<nuxt-child :key="$route.params.id"/>
2017-01-26 14:22:10 +00:00
</div>
</div>
</template>
<script>
export default {
2017-02-28 14:17:49 +00:00
asyncData ({ env }) {
2017-01-26 14:22:10 +00:00
return { users: env.users }
}
}
</script>
<style scoped>
2017-08-01 13:54:29 +00:00
.page-enter-active, .page-leave-active {
transition: opacity .4s, transform .4s;
transform-style: preserve-3d;
backface-visibility: hidden;
opacity: 1;
}
.page-enter, .page-leave-active {
opacity: 0.5;
transform: rotateY(100deg);
}
2017-01-26 14:22:10 +00:00
.container {
width: 100%;
margin: 0;
padding: 0;
font-family: sans-serif;
box-sizing: border-box;
}
.left {
width: 50%;
position: absolute;
top: 0;
left: 0;
}
.right {
width: 50%;
position: absolute;
top: 0;
right: 0;
}
.players {
list-style-type: none;
margin: 0;
padding: 0;
}
.players li a {
display: block;
border: 1px #ddd solid;
padding: 10px;
text-align: left;
color: #222;
text-decoration: none;
}
.players li a:hover {
color: orange;
}
</style>