Merge pull request #235 from Haeresis/routing

[Doc EN]: `guide/routing.md` review

Author: atinux

en/guide/routing.md

@@ -88,7 +88,7 @@ router: {
 
 As you can see the route named `users-id` has the path `:id?` which makes it optional, if you want to make it required, create an `index.vue` file in the `users/_id` directory.
 
-<p class="Alert Alert--info">Warning: dynamic routes are ignored by the `generate` command: [API Configuration generate](/api/configuration-generate#routes)</p>
+<p class="Alert Alert--info"><b>Warning:</b> dynamic routes are ignored by the `generate` command: [API Configuration generate](/api/configuration-generate#routes)</p>
 
 ### Validate Route Params
 
@@ -115,7 +115,7 @@ Nuxt.js lets you create nested route by using the children routes of 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.
 
-<p class="Alert Alert--info">Don't forget to write `<nuxt-child/>` inside the parent component (.vue file).</p>
+<p class="Alert Alert--info"><b>Warning:</b> don't forget to write `<nuxt-child/>` inside the parent component (<code>.vue</code> file).</p>
 
 This file tree:
 
@@ -213,15 +213,16 @@ router: {
 
 ## Transitions
 
-Nuxt.js uses the  [&lt;transition&gt;](http://vuejs.org/v2/guide/transitions.html#Transitioning-Single-Elements-Components) component to let you create amazing transitions/animations between your routes.
+Nuxt.js uses the [`<transition>`](http://vuejs.org/v2/guide/transitions.html#Transitioning-Single-Elements-Components) component to let you create amazing transitions/animations between your routes.
 
 ### Global Settings
 
-<p class="Alert Alert--info">Nuxt.js default transition name is `"page"`.</p>
+<p class="Alert Alert--nuxt-green"><b>Info :</b> Nuxt.js default transition name is `"page"`.</p>
 
 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.
 
 Our global css in `assets/main.css`:
+
 ```css
 .page-enter-active, .page-leave-active {
   transition: opacity .5s;
@@ -232,6 +233,7 @@ Our global css in `assets/main.css`:
 ```
 
 We add its path in our `nuxt.config.js` file:
+
 ```js
 module.exports = {
   css: [
@@ -247,6 +249,7 @@ More information about the transition key: [API Configuration transition](/api/p
 You can also define a custom transition for only one page with the `transition` property.
 
 We add a new class in our global css in `assets/main.css`:
+
 ```css
 .test-enter-active, .test-leave-active {
   transition: opacity .5s;
@@ -257,6 +260,7 @@ 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:
+
 ```js
 export default {
   transition: 'test'
@@ -280,13 +284,15 @@ export default function (context) {
 ```
 
 The middleware will be executed in series in this order:
+
 1. `nuxt.config.js`
 2. Matched layouts
 3. Matched pages
 
 A middleware can be asynchronous, simply return a `Promise` or use the 2nd `callback` argument:
 
 `middleware/stats.js`
+
 ```js
 import axios from 'axios'
 
@@ -300,6 +306,7 @@ export default function ({ route }) {
 Then, in your `nuxt.config.js`, layout or page, use the `middleware` key:
 
 `nuxt.config.js`
+
 ```js
 module.exports = {
   router: {