mirror of
https://github.com/nuxt/nuxt.git
synced 2024-12-01 01:47:11 +00:00
186 lines
3.2 KiB
Markdown
186 lines
3.2 KiB
Markdown
# Defining custom routes with Nuxt.js
|
||
|
||
> Nuxt.js is based on `vue-router` and let you to defined custom routes easily :rocket:
|
||
|
||
## Concept
|
||
|
||
Nuxt.js generates automatically the `vue-router` configuration according to your file tree of `.vue` files inside the `pages/` directory.
|
||
|
||
## Basic routes
|
||
|
||
This file tree:
|
||
|
||
```bash
|
||
pages/
|
||
--| team/
|
||
-----| index.vue
|
||
-----| about.vue
|
||
--| index.vue
|
||
```
|
||
|
||
will automatically generate:
|
||
|
||
```js
|
||
router: {
|
||
routes: [
|
||
{
|
||
name: 'index',
|
||
path: '/',
|
||
component: 'pages/index.vue'
|
||
},
|
||
{
|
||
name: 'team',
|
||
path: '/team',
|
||
component: 'pages/team/index.vue'
|
||
},
|
||
{
|
||
name: 'team-about',
|
||
path: '/team/about',
|
||
component: 'pages/team/about.vue'
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
## Dynamic routes
|
||
|
||
To define a dynamic route with a param, you need to define a `.vue` file **prefixed by an underscore**.
|
||
|
||
This file tree:
|
||
|
||
```bash
|
||
pages/
|
||
--| users/
|
||
-----| _id.vue
|
||
-----| index.vue
|
||
```
|
||
|
||
will automatically generate:
|
||
|
||
```js
|
||
router: {
|
||
routes: [
|
||
{
|
||
name: 'users',
|
||
path: '/users',
|
||
component: 'pages/users/index.vue'
|
||
},
|
||
{
|
||
name: 'users-id',
|
||
path: '/users/:id',
|
||
component: 'pages/users/_id.vue'
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
### Additional feature: validate (optional)
|
||
|
||
Nuxt.js lets you define a validator function inside your dynamic route component (In this example: `pages/users/_id.vue`).
|
||
|
||
If the validate method does not return `true`, Nuxt.js will automatically load the 404 error page.
|
||
|
||
```js
|
||
<script>
|
||
export default {
|
||
validate ({ params }) {
|
||
return /^\d+$/.test(params.id)
|
||
}
|
||
}
|
||
</script>
|
||
```
|
||
|
||
## Nested Routes (children)
|
||
|
||
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.
|
||
|
||
This file tree:
|
||
|
||
```bash
|
||
pages/
|
||
--| users/
|
||
-----| _id.vue
|
||
--| users.vue
|
||
```
|
||
|
||
will automatically generate:
|
||
|
||
```js
|
||
router: {
|
||
routes: [
|
||
{
|
||
path: '/users',
|
||
component: 'pages/users.vue',
|
||
children: [
|
||
{
|
||
path: ':id',
|
||
component: 'pages/users/_id.vue',
|
||
name: 'users-id'
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
## Dynamic Nested Routes
|
||
|
||
This file tree:
|
||
|
||
```bash
|
||
pages/
|
||
--| posts/
|
||
-----| _slug/
|
||
--------| _name.vue
|
||
--------| comments.vue
|
||
-----| _slug.vue
|
||
-----| index.vue
|
||
--| posts.vue
|
||
```
|
||
|
||
will automatically generate:
|
||
|
||
```js
|
||
router: {
|
||
routes: [
|
||
{
|
||
path: '/posts',
|
||
component: 'pages/posts.vue',
|
||
children: [
|
||
{
|
||
path '',
|
||
component: 'pages/posts/index.vue',
|
||
name: 'posts'
|
||
},
|
||
{
|
||
path: ':slug',
|
||
component: 'pages/posts/_slug.vue',
|
||
children: [
|
||
{
|
||
path: 'comments',
|
||
component: 'pages/posts/_slug/comments.vue',
|
||
name: 'posts-slug-comments'
|
||
},
|
||
{
|
||
path: ':name',
|
||
component: 'pages/posts/_slug/_name.vue',
|
||
name: 'posts-slug-name'
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
## Demo
|
||
|
||
```bash
|
||
npm install
|
||
npm start
|
||
```
|
||
|
||
Go to [http://localhost:3000](http://localhost:3000) and navigate through the pages.
|