Add nested routes example

This commit is contained in:
Sébastien Chopin 2017-01-26 15:22:10 +01:00
parent 615bcae90c
commit 68426b4df4
6 changed files with 134 additions and 0 deletions

View File

@ -0,0 +1,3 @@
# Nested Routes with Nuxt.js
[https://nuxtjs.org/examples/nested-routes](https://nuxtjs.org/examples/nested-routes)

View File

@ -0,0 +1,18 @@
module.exports = {
head: {
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' }
]
},
env: {
users: [
{ id: 1, name: 'Kobe Bryant', number: 24 },
{ id: 2, name: 'Michael Jordan', number: 23 },
{ id: 3, name: 'Stephen Curry', number: 30 },
{ id: 4, name: 'Lebron James', number: 23 },
{ id: 5, name: 'Kevin Durant', number: 35 },
{ id: 6, name: 'Kyrie Irving', number: 2 }
]
}
}

View File

@ -0,0 +1,12 @@
{
"name": "nuxt-custom-routes",
"description": "",
"dependencies": {
"nuxt": "latest"
},
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start"
}
}

View File

@ -0,0 +1,61 @@
<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">
<nuxt-child/>
</div>
</div>
</template>
<script>
export default {
data ({ env }) {
return { users: env.users }
}
}
</script>
<style scoped>
.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>

View File

@ -0,0 +1,29 @@
<template>
<div class="player">
<h1>#{{ number }}</h1>
<h2>{{ name }}</h2>
</div>
</template>
<script>
export default {
validate ({ params }) {
return !isNaN(+params.id)
},
data ({ params, env, error }) {
const user = env.users.find((user) => String(user.id) === params.id)
if (!user) {
return error({ message: 'User not found', statusCode: 404 })
}
return user
}
}
</script>
<style scoped>
.player {
text-align: center;
margin-top: 100px;
font-family: sans-serif;
}
</style>

View File

@ -0,0 +1,11 @@
<template>
<h2>Please select an user.</h2>
</template>
<style scoped>
h2 {
text-align: center;
margin-top: 100px;
font-family: sans-serif;
}
</style>