Skip to content
This repository was archived by the owner on Sep 3, 2024. It is now read-only.

[Doc EN]: guide/routing.md review #235

Merged
merged 3 commits into from
Sep 22, 2017
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 11 additions & 4 deletions en/guide/routing.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Copy link
Contributor Author

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.


### Validate Route Params

Expand All @@ -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:

Expand Down Expand Up @@ -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.
Copy link
Contributor Author

Choose a reason for hiding this comment

The 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>
Copy link
Contributor Author

Choose a reason for hiding this comment

The 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`:

Copy link
Contributor Author

Choose a reason for hiding this comment

The 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;
Expand All @@ -232,6 +233,7 @@ Our global css in `assets/main.css`:
```

We add its path in our `nuxt.config.js` file:

Copy link
Contributor Author

Choose a reason for hiding this comment

The 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: [
Expand All @@ -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`:

Copy link
Contributor Author

Choose a reason for hiding this comment

The 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;
Expand All @@ -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:

Copy link
Contributor Author

Choose a reason for hiding this comment

The 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'
Expand All @@ -280,13 +284,15 @@ export default function (context) {
```

The middleware will be executed in series in this order:

Copy link
Contributor Author

Choose a reason for hiding this comment

The 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`

Copy link
Contributor Author

Choose a reason for hiding this comment

The 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'

Expand All @@ -300,6 +306,7 @@ export default function ({ route }) {
Then, in your `nuxt.config.js`, layout or page, use the `middleware` key:

`nuxt.config.js`

Copy link
Contributor Author

Choose a reason for hiding this comment

The 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: {
Expand Down