Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2025-01-30 15:22:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update README.md

Browse Source
This commit is contained in:
Sébastien Chopin 2016-12-20 10:38:16 +01:00 committed by GitHub
parent 004e21b929
commit f43617b083
1 changed files with 47 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
examples/custom-routes/README.md
View File

@ -1,21 +1,21 @@
# Defining custom routes with Nuxt.js # Defining custom routes with Nuxt.js
> Nuxt.js is based on vue-router and allows you to defined custom routes :rocket: > Nuxt.js is based on `vue-router` and let you to defined custom routes easily :rocket:
## Concept ## Concept
Nuxt.js detect and generate automatically the vue-router config according to your file tree of .vue files inside the `pages` directory. Nuxt.js generates automatically the `vue-router` configuration according to your file tree of `.vue` files inside the `pages/` directory.
## Basic routes ## Basic routes
This file tree: This file tree:
```bash ```bash
/pages pages/
|-> /team --| team/
|-> index.vue -----| index.vue
|-> about.vue -----| about.vue
|-> index.vue --| index.vue
``` ```
will automatically generate: will automatically generate:
@ -26,17 +26,17 @@ router: {
{ {
name: 'index', name: 'index',
path: '/', path: '/',
component: 'pages/index' component: 'pages/index.vue'
}, },
{ {
name: 'team', name: 'team',
path: '/team', path: '/team',
component: 'pages/team/index' component: 'pages/team/index.vue'
}, },
{ {
name: 'team-about', name: 'team-about',
path: '/team/about', path: '/team/about',
component: 'pages/team/about' component: 'pages/team/about.vue'
} }
] ]
} }
@ -44,15 +44,15 @@ router: {
## Dynamic routes ## Dynamic routes
To define a dynamic route with a param, you need to define a .vue file prefixed by an underscore. To define a dynamic route with a param, you need to define a `.vue` file **prefixed by an underscore**.
This file tree: This file tree:
```bash ```bash
/pages pages/
|-> /projects --| users/
|-> index.vue -----| _id.vue
|-> _slug.vue -----| index.vue
``` ```
will automatically generate: will automatically generate:
@ -61,30 +61,30 @@ will automatically generate:
router: { router: {
routes: [ routes: [
{ {
name: 'projects', name: 'users',
path: '/projects', path: '/users',
component: 'pages/projects/index' component: 'pages/users/index.vue'
}, },
{ {
name: 'projects-slug', name: 'users-id',
path: '/projects/:slug', path: '/users/:id',
component: 'pages/projects/_slug' component: 'pages/users/_id.vue'
} }
] ]
} }
``` ```
### Additional feature : validate (optional) ### Additional feature: validate (optional)
Nuxt.js allows you to define a validator function inside your dynamic route component (In this example: `pages/projects/_slug.vue`). Nuxt.js lets you define a validator function inside your dynamic route component (In this example: `pages/users/_id.vue`).
If validate function fails, Nuxt.js will automatically load the 404 error page. If the validate method does not return `true`, Nuxt.js will automatically load the 404 error page.
```js ```js
<script> <script>
export default { export default {
validate ({ params }) { validate ({ params }) {
return /^[A-z]+$/.test(params.slug) return /^\d+$/.test(params.id)
} }
} }
</script> </script>
@ -92,16 +92,16 @@ export default {
## Nested Routes (children) ## Nested Routes (children)
To define a nested route, you need to define a .vue file with the same name as the directory which contain your children views. To define a nested route, you need to create a `.vue` file with the **same name as the directory** which contain your children views.
> Don't forget to put `<nuxt-child></nuxt-child>` inside your parent .vue file. > Don't forget to put `<nuxt-child></nuxt-child>` inside your parent `.vue` file.
This file tree: This file tree:
```bash ```bash
/pages pages/
|-> /users --| users/
|-> _id.vue -----| _id.vue
|-> users.vue --| users.vue
``` ```
will automatically generate: will automatically generate:
@ -111,11 +111,11 @@ router: {
routes: [ routes: [
{ {
path: '/users', path: '/users',
component: 'pages/users', component: 'pages/users.vue',
children: [ children: [
{ {
path: ':id', path: ':id',
component: 'pages/users/_id', component: 'pages/users/_id.vue',
name: 'users-id' name: 'users-id'
} }
] ]
@ -129,14 +129,14 @@ router: {
This file tree: This file tree:
```bash ```bash
/pages pages/
|-> /posts --| posts/
|-> /_slug -----| _slug/
|-> _name.vue --------| _name.vue
|-> comments.vue --------| comments.vue
|-> _slug.vue -----| _slug.vue
|-> index.vue -----| index.vue
|-> posts.vue --| posts.vue
``` ```
will automatically generate: will automatically generate:
@ -146,25 +146,25 @@ router: {
routes: [ routes: [
{ {
path: '/posts', path: '/posts',
component: 'pages/posts', component: 'pages/posts.vue',
children: [ children: [
{ {
path: "",          path '',
component: 'pages/posts/index', component: 'pages/posts/index.vue',
name: 'posts' name: 'posts'
}, },
{ {
path: ':slug', path: ':slug',
component: 'pages/posts/_slug', component: 'pages/posts/_slug.vue',
children: [ children: [
{ {
path: 'comments', path: 'comments',
component: 'pages/posts/_slug/comments', component: 'pages/posts/_slug/comments.vue',
name: 'posts-slug-comments' name: 'posts-slug-comments'
}, },
{ {
path: ':name', path: ':name',
component: 'pages/posts/_slug/_name', component: 'pages/posts/_slug/_name.vue',
name: 'posts-slug-name' name: 'posts-slug-name'
} }
] ]