-
Notifications
You must be signed in to change notification settings - Fork 933
[Doc EN]: guide/routing.md
review
#235
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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 [<transition>](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. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Because it's a code pattern we use the tick |
||
|
||
### 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> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Because it's an info. For more consistency with previous « Info : » |
||
|
||
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`: | ||
|
||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. By convention, each paragraph and code block are distant from one empty line. |
||
```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: | ||
|
||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. By convention, each paragraph and code block are distant from one empty line. |
||
```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`: | ||
|
||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. By convention, each paragraph and code block are distant from one empty line. |
||
```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: | ||
|
||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. By convention, each paragraph and code block are distant from one empty line. |
||
```js | ||
export default { | ||
transition: 'test' | ||
|
@@ -280,13 +284,15 @@ export default function (context) { | |
``` | ||
|
||
The middleware will be executed in series in this order: | ||
|
||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. By convention, each paragraph and code block are distant from one empty line. |
||
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` | ||
|
||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. By convention, each paragraph and code block are distant from one empty line. |
||
```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` | ||
|
||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. By convention, each paragraph and code block are distant from one empty line. |
||
```js | ||
module.exports = { | ||
router: { | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
More consistency with previous « Info: » box.