mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-11 08:33:53 +00:00
Add nested routes example
This commit is contained in:
parent
615bcae90c
commit
68426b4df4
3
examples/nested-routes/README.md
Normal file
3
examples/nested-routes/README.md
Normal file
@ -0,0 +1,3 @@
|
||||
# Nested Routes with Nuxt.js
|
||||
|
||||
[https://nuxtjs.org/examples/nested-routes](https://nuxtjs.org/examples/nested-routes)
|
18
examples/nested-routes/nuxt.config.js
Normal file
18
examples/nested-routes/nuxt.config.js
Normal 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 }
|
||||
]
|
||||
}
|
||||
}
|
12
examples/nested-routes/package.json
Normal file
12
examples/nested-routes/package.json
Normal file
@ -0,0 +1,12 @@
|
||||
{
|
||||
"name": "nuxt-custom-routes",
|
||||
"description": "",
|
||||
"dependencies": {
|
||||
"nuxt": "latest"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "nuxt",
|
||||
"build": "nuxt build",
|
||||
"start": "nuxt start"
|
||||
}
|
||||
}
|
61
examples/nested-routes/pages/index.vue
Normal file
61
examples/nested-routes/pages/index.vue
Normal 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>
|
29
examples/nested-routes/pages/index/_id.vue
Normal file
29
examples/nested-routes/pages/index/_id.vue
Normal 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>
|
11
examples/nested-routes/pages/index/index.vue
Normal file
11
examples/nested-routes/pages/index/index.vue
Normal 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>
|
Loading…
Reference in New Issue
Block a user