Warning: dynamic routes are ignored by the `generate` command: [API Configuration generate](/api/configuration-generate#routes)
+Attention : les routes dynamiques sont ignorées par la commande `generate` : [ Configuration de l'API pour la génération](/api/configuration-generate#routes)
-### Validate Route Params +### Validation des paramètres de route -Nuxt.js lets you define a validator method inside your dynamic route component. +Nuxt.js vous permet de définir une méthode de validation dans votre composant de routage dynamique. -In this example: `pages/users/_id.vue` +Par exemple : `pages/users/_id.vue` ```js export default { validate ({ params }) { - // Must be a number + // Doit être un nombre return /^\d+$/.test(params.id) } } ``` -If the validate method does not return `true`, Nuxt.js will automatically load the 404 error page. +Si la méthode de validation ne renvoie pas `true`, Nuxt.js chargera automatiquement la page d'erreur 404. -More information about the validate method: [API Pages validate](/api/pages-validate) +Plus d'informations à propos de la méthode de validation : [API pour la validation de pages](/api/pages-validate) -## Nested Routes +## Routes imbriquées -Nuxt.js lets you create nested route by using the children routes of vue-router. +Nuxt.js vous permet de créer des routes imbriquées en utilisant les routes enfants de vue-router. -To define the parent component of a nested route, you need to create a Vue file with the **same name as the directory** which contain your children views. +Pour définir le composant parent d'une route imbriquée, vous devez créer un fichier Vue avec le **même nom que le répertoire** qui contient les vues enfants. -Don't forget to write `
Attention : n'oubliez pas d'écrire `.vue).
Nuxt.js default transition name is `"page"`.
+Info : dans Nuxt.js, le nom de la transition par défaut est `"page"`.
-To add a fade transition to every page of your application, we need a CSS file that is shared across all our routes, so we start by creating a file in the `assets` folder. +Pour ajouter une transition de fondu à chaque page de votre application, nous avons besoin d'un fichier CSS qui est partagé sur toutes nos routes. Commençons par créer un fichier dans le dossier `assets`. -Our global css in `assets/main.css`: +Notre CSS global dans `assets/main.css` : ```css .page-enter-active, .page-leave-active { transition: opacity .5s; } -.page-enter, .page-leave-to { +.page-enter, .page-leave-active { opacity: 0; } ``` -We add its path in our `nuxt.config.js` file: +Nous ajoutons son chemin dans notre fichier de configuration `nuxt.config.js` : ```js module.exports = { css: [ @@ -240,13 +240,13 @@ module.exports = { } ``` -More information about the transition key: [API Configuration transition](/api/pages-transition) +Plus d'informations à propos des transitions : [Configuration de l'API pour les transitions](/api/pages-transition) -### Page Settings +### Paramètres des pages -You can also define a custom transition for only one page with the `transition` property. +Vous êtes également libre de définir une transition personnalisée pour une seule page à l'aide de la propriété `transition`. -We add a new class in our global css in `assets/main.css`: +Nous ajoutons une nouvelle classe dans notre CSS global `assets/main.css` : ```css .test-enter-active, .test-leave-active { transition: opacity .5s; @@ -256,22 +256,22 @@ We add a new class in our global css in `assets/main.css`: } ``` -then, we use the transition property to define the class name to use for this page transition: +puis, nous utilisons la propriété transition pour définir le nom de la classe à utiliser pour cette transition de page : ```js export default { transition: 'test' } ``` -More information about the transition property: [API Pages transition](/api/pages-transition) +Plus d'informations à propos de la propriété transition : [API pour la transition de pages](/api/pages-transition) ## Middleware -> Middleware lets you define custom functions that can be run before rendering either a page or a group of pages. +> Le middleware vous permet de définir une fonction personnalisée qui sera exécutée avant le rendu d'une page ou d'un groupe de pages. -**Every middleware should be placed in the `middleware/` directory.** The filename will be the name of the middleware (`middleware/auth.js` will be the `auth` middleware). +**Tous les middlewares devraient être placés dans le répertoire `middleware/`.** Le nom du fichier étant le nom du middleware (`middleware/auth.js` deviendra le middleware `auth`). -A middleware receives [the context](/api/context) as first argument: +Un middleware reçoit [le contexte](/api#context) comme premier argument : ```js export default function (context) { @@ -279,12 +279,12 @@ export default function (context) { } ``` -The middleware will be executed in series in this order: +Le middleware sera exécuté en série dans l'ordre suivant : 1. `nuxt.config.js` -2. Matched layouts -3. Matched pages +2. Mises en page correspondantes +3. Pages correspondantes -A middleware can be asynchronous, simply return a `Promise` or use the 2nd `callback` argument: +Un middleware peut être asynchrone, retourner une `Promise` ou utiliser une fonction de rappel en second argument : `middleware/stats.js` ```js @@ -297,7 +297,7 @@ export default function ({ route }) { } ``` -Then, in your `nuxt.config.js`, layout or page, use the `middleware` key: +Puis, dans `nuxt.config.js`, pour une mise en page ou une page, utilisez le mot-clé `middleware` : `nuxt.config.js` ```js @@ -308,6 +308,6 @@ module.exports = { } ``` -The `stats` middleware will be called for every route changes. +Le middleware `stats` sera appelé à chaque changement de routes. -To see a real-life example using the middleware, please see [example-auth0](https://github.com/nuxt/example-auth0) on GitHub. +Pour voir un exemple d'usage utilisant les middlewares, consultez [example-auth0](https://github.com/nuxt/example-auth0) sur GitHub.