Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-26 23:52:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

update example

Browse Source
This commit is contained in:
Alexandre Chopin 2016-12-11 16:41:52 +01:00
parent af36b495b0
commit 1ee4f9c40e
18 changed files with 258 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
examples/custom-routes/layouts/app.vue Normal file
View File

@ -0,0 +1,96 @@
<template>
<nuxt-container>
<nav class="Navbar clearfix">
<h1 class="Navbar__Title">Nuxt Custom Routes</h1>
<ul class="Navbar__Links">
<li class="Navbar__Links__Item">
<router-link to="/" class="Navbar__Links__Item__Link">
Basic route
</router-link>
</li>
<li class="Navbar__Links__Item">
<router-link to="/projects" class="Navbar__Links__Item__Link">
Dynamic route
</router-link>
</li>
<li class="Navbar__Links__Item">
<router-link to="/users" class="Navbar__Links__Item__Link">
Nested routes
</router-link>
</li>
<li class="Navbar__Links__Item">
<router-link to="/posts" class="Navbar__Links__Item__Link">
Dynamic nested routes
</router-link>
</li>
</ul>
</nav>
<nuxt/>
</nuxt-container>
</template>
<style>
html, body
{
font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
letter-spacing: 0.25px;
padding: 0;
margin: 0;
}
*, *::before, *::after
{
box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 300;
text-align: center;
}
.clearfix:before, .clearfix:after
{
content: " ";
display: table;
}
.clearfix:after
{
clear: both;
}
.container {
margin: 30px;
border: 1px solid #ddd;
}
.Navbar
{
background-color: #fff;
border-bottom: 1px solid #ddd;
margin: 0;
padding: 15px 30px;
}
.Navbar__Title
{
float: left;
font-weight: 300;
margin: 0;
}
.Navbar__Links
{
float: right;
list-style: none;
margin: 0;
padding: 0;
}
.Navbar__Links__Item
{
float: left;
margin: 5px 15px;
}
.Navbar__Links__Item__Link
{
color: #000;
}
a, a:hover
{
text-transform: uppercase;
text-decoration: none;
color: #41B883;
}
</style>

38
examples/custom-routes/nuxt.config.js
View File

@ -1,27 +1,19 @@
module.exports = {
router: {
// routes: [
// { name: 'post-slug', path: ':slug(\\d+)' }
// ],
routes: {
comments: {
_id: {
regexp: ':id(\\d+)',
generate: [1, 2, 3, 4] // Need to be finished on generate
}
},
three: {
_two: {
regexp: ':two(\\d+)',
one: {
_id: {
regexp: ':id(\\d+)'
}
}
}
}
}
},
// router: {
// routes: {
// users: {
// _id: {
// regexp: ':id(\\d+)',
// alias: '/author/:authorid/post/:id'
// // generate: [1, 2, 3, 4] // Need to be finished on generate
// },
// meta: {
// title: 'users'
// },
// alias: '/author/:authorid/post'
// }
// }
// },
build: {
vendor: ['axios']
}

5
examples/custom-routes/pages/comments/_id.vue
View File

@ -1,5 +0,0 @@
<template>
<div>
Comments by Id
</div>
</template>

43
examples/custom-routes/pages/index.vue
View File

@ -1,46 +1,5 @@
<template>
<div class="container">
<h2>Users</h2>
<ul class="users">
<!-- <li v-for="user in users">
<router-link :to="{ name: 'user', params: { id: user.id } }">{{ user.name }}</router-link>
</li> -->
</ul>
<h2>Home</h2>
</div>
</template>
<script>
// import axios from 'axios'
export default {
// data () {
// return axios.get('https://jsonplaceholder.typicode.com/users')
// .then((res) => {
// return { users: res.data }
// })
// }
}
</script>
<style scoped>
.container {
text-align: center;
margin-top: 100px;
font-family: sans-serif;
}
.users {
list-style-type: none;
}
.users li a {
display: inline-block;
width: 200px;
border: 1px #ddd solid;
padding: 10px;
text-align: left;
color: #222;
text-decoration: none;
}
.users li a:hover {
color: orange;
}
</style>

6
examples/custom-routes/pages/post.vue
View File

@ -1,6 +0,0 @@
<template>
<div>
Post Layout
<router-view></router-view>
</div>
</template>

5
examples/custom-routes/pages/post/_slug.vue
View File

@ -1,5 +0,0 @@
<template>
<div>
Post : slug
</div>
</template>

6
examples/custom-routes/pages/posts.vue Normal file
View File

@ -0,0 +1,6 @@
<template>
<div class="container">
<h1>Dynamic nested route example</h1>
<router-view></router-view>
</div>
</template>

29
examples/custom-routes/pages/posts/_slug.vue Normal file
View File

@ -0,0 +1,29 @@
<template>
<div class="container">
<h2>Post : {{ $route.params.slug }}</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
<router-link :to="{ name: 'posts-slug-name', params: { name: 'foo'} }">
Foo
</router-link>
<router-link :to="{ name: 'posts-slug-name', params: { name: 'bar'} }">
Bar
</router-link>
</p>
<router-view></router-view>
</div>
</template>
<style scoped>
p
{
text-align: center;
padding: 15px 30px;
}
a
{
margin: 0 15px;
}
</style>

16
examples/custom-routes/pages/posts/_slug/_name.vue Normal file
View File

@ -0,0 +1,16 @@
<template>
<div class="container">
<h2>{{ $route.params.name }}</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</template>
<style scoped>
p
{
text-align: center;
padding: 15px 30px;
}
</style>

17
examples/custom-routes/pages/posts/index.vue Normal file
View File

@ -0,0 +1,17 @@
<template>
<div class="container">
<h2>Posts list</h2>
<p>
<router-link to="/posts/welcome">
Welcome post
</router-link>
</p>
</div>
</template>
<style scoped>
p
{
text-align: center;
}
</style>

16
examples/custom-routes/pages/projects/_slug.vue Normal file
View File

@ -0,0 +1,16 @@
<template>
<div class="container">
<h1>Dynamic route example</h1>
<h2>Project : {{ $route.params.slug }}</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</template>
<style scoped>
p
{
padding: 15px 30px;
}
</style>

18
examples/custom-routes/pages/projects/index.vue Normal file
View File

@ -0,0 +1,18 @@
<template>
<div class="container">
<h1>Dynamic route example</h1>
<h2>Projects list</h2>
<p>
<router-link :to="{ name: 'projects-slug', params: { slug: 'nuxt.js'} }">
Nuxt.js
</router-link>
</p>
</div>
</template>
<style scoped>
p
{
text-align: center;
}
</style>

6
examples/custom-routes/pages/three.vue
View File

@ -1,6 +0,0 @@
<template>
<div>
Layout Three
<router-view></router-view>
</div>
</template>

6
examples/custom-routes/pages/three/_two.vue
View File

@ -1,6 +0,0 @@
<template>
<div>
Layout Two
<router-view></router-view>
</div>
</template>

5
examples/custom-routes/pages/three/_two/index.vue
View File

@ -1,5 +0,0 @@
<template>
<div>
Layout Two Index
</div>
</template>

6
examples/custom-routes/pages/three/_two/one.vue
View File

@ -1,6 +0,0 @@
<template>
<div>
Layout One
<router-view></router-view>
</div>
</template>

5
examples/custom-routes/pages/three/_two/one/_id.vue
View File

@ -1,5 +0,0 @@
<template>
<div>
Layout One with Id
</div>
</template>

44
examples/custom-routes/pages/users.vue Normal file
View File

@ -0,0 +1,44 @@
<template>
<div class="container clearfix">
<h1>Nested routes example</h1>
<h2>Users list</h2>
<ul class="users">
<li v-for="user in users">
<router-link :to="{ name: 'users-id', params: { id: user.id } }">{{ user.name }}</router-link>
</li>
</ul>
<router-view></router-view>
</div>
</template>
<script>
import axios from 'axios'
export default {
data () {
return axios.get('https://jsonplaceholder.typicode.com/users')
.then((res) => {
return { users: res.data }
})
}
}
</script>
<style scoped>
.users {
float: left;
list-style-type: none;
}
.users li a {
display: inline-block;
width: 200px;
border: 1px #ddd solid;
padding: 10px;
text-align: left;
color: #222;
text-decoration: none;
}
.users li a:hover {
color: orange;
}
</style>