mirror of https://github.com/nuxt/nuxt.git
Add tests for dynamic-routes
This commit is contained in:
Sébastien Chopin
parent
02f966d495
commit
048506ae35
|
|
@ -0,0 +1,51 @@
|
|||
import test from 'ava'
|
||||
import { resolve } from 'path'
|
||||
import fs from 'fs'
|
||||
import pify from 'pify'
|
||||
const readFile = pify(fs.readFile)
|
||||
|
||||
// Init nuxt.js and create server listening on localhost:4000
|
||||
test.before('Init Nuxt.js', async t => {
|
||||
const Nuxt = require('../')
|
||||
const nuxt = new Nuxt({
|
||||
rootDir: resolve(__dirname, 'fixtures/dynamic-routes'),
|
||||
dev: false
|
||||
})
|
||||
await nuxt.build()
|
||||
})
|
||||
|
||||
test('Check .nuxt/router.js', t => {
|
||||
return readFile(resolve(__dirname, './fixtures/dynamic-routes/.nuxt/router.js'), 'utf-8')
|
||||
.then((routerFile) => {
|
||||
routerFile = routerFile.slice(
|
||||
routerFile.indexOf('routes: ['),
|
||||
-3
|
||||
)
|
||||
.replace('routes: [', '[')
|
||||
.replace(/ _[0-9A-z]+,/g, ' "",')
|
||||
let routes = eval('( ' + routerFile + ')') // eslint-disable-line no-eval
|
||||
// pages/test/index.vue
|
||||
t.is(routes[0].path, '/test')
|
||||
t.is(routes[0].name, 'test')
|
||||
// pages/parent.vue
|
||||
t.is(routes[1].path, '/parent')
|
||||
t.falsy(routes[1].name) // parent route has no name
|
||||
// pages/parent/*.vue
|
||||
t.is(routes[1].children.length, 3) // parent has 3 children
|
||||
t.deepEqual(routes[1].children.map((r) => r.path), ['', 'teub', 'child'])
|
||||
t.deepEqual(routes[1].children.map((r) => r.name), ['parent', 'parent-teub', 'parent-child'])
|
||||
// pages/test/users.vue
|
||||
t.is(routes[2].path, '/test/users')
|
||||
t.falsy(routes[2].name) // parent route has no name
|
||||
// pages/test/users/*.vue
|
||||
t.is(routes[2].children.length, 3) // parent has 3 children
|
||||
t.deepEqual(routes[2].children.map((r) => r.path), ['', ':id', ':index/teub'])
|
||||
t.deepEqual(routes[2].children.map((r) => r.name), ['test-users', 'test-users-id', 'test-users-index-teub'])
|
||||
// pages/_slug.vue
|
||||
t.is(routes[3].path, '/:slug?')
|
||||
t.is(routes[3].name, 'slug')
|
||||
// pages/_key/_id.vue
|
||||
t.is(routes[4].path, '/:key?/:id?')
|
||||
t.is(routes[4].name, 'key-id')
|
||||
})
|
||||
})
|
||||
|
|
@ -1,185 +0,0 @@
|
|||
# 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.
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
module.exports = {
|
||||
build: {
|
||||
vendor: ['axios']
|
||||
}
|
||||
}
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
{
|
||||
"name": "nuxt-custom-routes",
|
||||
"description": "",
|
||||
"dependencies": {
|
||||
"axios": "^0.15.2",
|
||||
"nuxt": "latest"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "nuxt",
|
||||
"build": "nuxt build",
|
||||
"start": "nuxt start"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<h2>Users</h2>
|
||||
<ul class="users">
|
||||
<li v-for="user in users">
|
||||
<nuxt-link :to="'/users/'+user.id">{{ user.name }}</nuxt-link>
|
||||
</li>
|
||||
</ul>
|
||||
</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>
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
<template>
|
||||
<div class="user">
|
||||
<h3>{{ name }}</h3>
|
||||
<h4>@{{ username }}</h4>
|
||||
<p>Email : {{ email }}</p>
|
||||
<p><nuxt-link to="/">List of users</nuxt-link></p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
validate ({ params }) {
|
||||
return !isNaN(+params.id)
|
||||
},
|
||||
data ({ params, error }) {
|
||||
return axios.get(`https://jsonplaceholder.typicode.com/users/${+params.id}`)
|
||||
.then((res) => res.data)
|
||||
.catch(() => {
|
||||
error({ message: 'User not found', statusCode: 404 })
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.user {
|
||||
text-align: center;
|
||||
margin-top: 100px;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue