Skip to content

Commit c4f811e

Browse files
zeratulmdqposva
authored andcommitted
Spanish additions. Up to date (vuejs#1441)
* Spanish additions. Up to date * Changes requested 2017-05-21 * Update navigation-guards.md
1 parent 55373ec commit c4f811e

File tree

8 files changed

+98
-22
lines changed

8 files changed

+98
-22
lines changed

docs/es/advanced/data-fetching.md

Lines changed: 16 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -83,31 +83,28 @@ export default {
8383
},
8484
beforeRouteEnter (to, from, next) {
8585
getPost(to.params.id, (err, post) => {
86-
if (err) {
87-
// muestra algún mensaje global de error
88-
next(false)
89-
} else {
90-
next(vm => {
91-
vm.post = post
92-
})
93-
}
86+
next(vm => vm.setData(err, post))
9487
})
9588
},
9689
// cuando la ruta cambie y este componente ya haya sido renderizado,
9790
// la lógica será ligeramente diferente
98-
watch: {
99-
$route () {
100-
this.post = null
101-
getPost(this.$route.params.id, (err, post) => {
102-
if (err) {
103-
this.error = err.toString()
104-
} else {
105-
this.post = post
106-
}
107-
})
91+
beforeRouteUpdate (to, from, next) {
92+
this.post = null
93+
getPost(to.params.id, (err, post) => {
94+
this.setData(err, post)
95+
next()
96+
})
97+
},
98+
methods: {
99+
setData (err, post) {
100+
if (err) {
101+
this.error = err.toString()
102+
} else {
103+
this.post = post
104+
}
108105
}
109106
}
110107
}
111108
```
112109

113-
El usuario permanecerá en la vista actual mientras se esté obteniendo el recurso para la vista entrante. Por lo tanto, es recomendable mostrar algún tipo de indicador o barra de progreso. Si la obtención de datos falla, es necesario mostrar algún tipo de advertencia global.
110+
El usuario permanecerá en la vista anterior mientras se esté obteniendo el recurso para la vista entrante. Por lo tanto, es recomendable mostrar algún tipo de indicador o barra de progreso. Si la obtención de datos falla, es necesario mostrar algún tipo de advertencia global.

docs/es/advanced/navigation-guards.md

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
Como el nombre sugiere, las guardias de navegación provistas por `vue-router` son básicamente utilizadas para proteger rutas de navegación ya sea redireccionando o cancelándolas. Hay varias maneras de engancharse en el proceso de navegación de rutas: globalmente, por ruta o dentro de los componentes.
44

5-
Recuerda: **Los cambios en los parámetros o las _queries_ no harán que se ejecuten los guardias de navegación**. Simplemente [observa el objeto `$route`](../essentials/dynamic-matching.md#reacting-to-params-changes) para poder reaccionar frente a esos cambios.
5+
Recuerda: **Los cambios en los parámetros o las _queries_ no harán que se ejecuten los guardias de navegación**. Simplemente [observa el objeto `$route`](../essentials/dynamic-matching.md#reacting-to-params-changes) para poder reaccionar frente a esos cambios o utiliza el guardia `beforeRouteUpdate` en el componente.
66

77
### Guardias globales
88

@@ -32,9 +32,19 @@ Cada función guardia recibe tres argumentos:
3232

3333
- **`next('/')` o `next({ path: '/' })`**: redirecciona a una ruta diferente. La navegación actual será abortada y una nueva será iniciada.
3434

35+
- **`next(error)`**: (2.4.0+) si el argumento pasado a `next` es una instancia de `Error`, la navegación se abortará y el error será pasado a las _funciones callback_ registradas a través de `router.onError()`.
36+
3537
**Asegúrese de llamar siempre a la función `next`, sino el _hook_ nunca será resuelto.**
3638

37-
También puedes registrar _hooks after_ globales. Sin embargo, a diferencia de las guardias, estos _hooks_ no reciben una función `next` y no pueden afectar la navegación:
39+
### Guardias de resolución globales
40+
41+
> Nuevo en 2.5.0
42+
43+
A partir de la versión 2.5.0 puedes registrar un guardia global con `router.beforeResolve`. Esto es similar a `router.beforeEach`, con la diferencia que los guardias de resolución serán llamados justo antes de que la navegación sea confirmada, **después que todos los guardias en el componente y los componentes de rutas asíncronos sean resueltos**.
44+
45+
### Post _hooks_ globales
46+
47+
También puedes registrar _hooks_ globales que se ejecutarán después de que la navegación sea confirmada. Sin embargo, a diferencia de los guardias, estos _hooks_ no reciben una función `next` y no pueden afectar la navegación:
3848

3949
``` js
4050
router.afterEach((to, from) => {
@@ -107,3 +117,18 @@ beforeRouteEnter (to, from, next) {
107117
```
108118

109119
Puedes acceder directamente a `this` dentro de `beforeRouteLeave`. La guardia _leave_ se utiliza normalmente para prevenir al usuario cuando intenta abandonar la ruta accidentalmente sin guardar cambios. La navegación puede ser cancelada ejecutando `next(false)`.
120+
121+
### El flujo de resolución de navegación completo
122+
123+
1. Se dispara la navegación.
124+
2. Se llaman a los guardias _leave_ en los componentes desactivados.
125+
3. Se llaman a los guardias `beforeEach` globales.
126+
4. Se llaman a los guardias `beforeRouteUpdate` en los componentes reutilizados (2.2+).
127+
5. Se llama a `beforeEnter` en las configuraciones de rutas.
128+
6. Se resuelven componentes de rutas asíncronos.
129+
7. Se llama a `beforeRouteEnter` en los componentes activados.
130+
8. Se llama a los guardias globales `beforeResolve` (2.5+).
131+
9. Se confirma la navegación.
132+
10. Se llaman a los _hook_ globales`afterEach`.
133+
11. Se disparan las actualizaciones del DOM.
134+
12. Se llaman a las _funciones callback_ pasadas a `next` en los guardias `beforeRouteEnter` con las instancias creadas.

docs/es/api/component-injections.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ Estas propiedades son inyectadas dentro de cada componente hijo pasando la insta
1515
### Opciones habilitadas
1616

1717
- **beforeRouteEnter**
18+
- **beforeRouteUpdate** (agregado en 2.2)
1819
- **beforeRouteLeave**
1920

2021
Más información en [guardias en componentes](../advanced/navigation-guards.md#incomponent-guards).

docs/es/api/options.md

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,16 @@
5353

5454
Configura globalmente la clase activa por defecto de `<router-link>`. Más información en [router-link](router-link.md).
5555

56+
### linkExactActiveClass
57+
58+
> 2.5.0+
59+
60+
- tipo: `string`
61+
62+
- valor por defecto: `"router-link-exact-active"`
63+
64+
Configura globalmente la clase activa de `<router-link>` para coincidencias de rutas exactas. Más información en [router-link](router-link.md).
65+
5666
### scrollBehavior
5767

5868
- tipo: `Function`
@@ -68,3 +78,11 @@
6878
```
6979

7080
Para más detalles, [comportamiento del scroll](../advanced/scroll-behavior.md).
81+
82+
### parseQuery / stringifyQuery
83+
84+
> 2.4.0+
85+
86+
- tipo: `Function`
87+
88+
Provee funciones parse / stringify para _query string_ personalizadas. Sobreescribe la función por defecto.

docs/es/api/router-instance.md

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,12 @@
2323
### Métodos
2424

2525
- **router.beforeEach(guard)**
26+
- **router.beforeResolve(guard)** (2.5.0+)
2627
- **router.afterEach(hook)**
2728

2829
Agrega guardias de navegación globales. Info: [guardias de navegación](../advanced/navigation-guards.md).
2930

31+
A partir de la versión 2.5.0 los tres métodos devuelven una función que elimina el guardia/hook registrado.
3032

3133
- **router.push(location, onComplete?, onAbort?)**
3234
- **router.replace(location, onComplete?, onAbort?)**
@@ -60,10 +62,24 @@
6062
6163
Agrega dinámicamente más rutas al `router`. El argumento debe ser un array utilizando el mismo formato de configuración que las opciones del constructor de `routes`.
6264

63-
- **router.onReady(callback)**
65+
- **router.onReady(callback, [errorCallback])**
6466

6567
> 2.2.0+
6668
6769
Este método pone una _función callback_ en espera a ser llamada cuando el `router` haya completado la navegación inicial, lo cual significa que ya ha resuelto todos los _hooks_ de entrada asíncronos y los componentes asíncronos asociados con la ruta inicial.
6870

6971
Esto es útil en el renderizado del lado servidor para asegurar un resultado consistente tanto en el servidor como en el cliente.
72+
73+
El segundo argumento, `errorCallback`, solo es soportado a partir de la versión 2.4. Será llamado cuando la resolución de ruta inicial devuelva un error (por ejemplo, cuando falla la resolución de un componente asíncrono).
74+
75+
- **router.onError(callback)**
76+
77+
> 2.4.0+
78+
79+
Registra una _función callback_ la cual será llamada cuando un error es capturado durante la navegación. Ten en cuenta que sucederá solo en las siguientes situaciones:
80+
81+
- El error es lanzado sincrónicamente dentro de una función de guardia de ruta;
82+
83+
- El error es capturado y manejado asíncronamente llamando a `next(err)` dentro de una función de guardia de ruta;
84+
85+
- El error ocurre cuando se intenta resolver un componente asíncrono que es necesario para renderizar una ruta.

docs/es/api/router-link.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,16 @@ Es preferible utilizar `<router-link>` en lugar de escribir directamente `<a hre
115115

116116
Son los eventos que permiten lanzar la navegacion.
117117

118+
- **exact-active-class**
119+
120+
> 2.5.0+
121+
122+
- tipo: `string`
123+
124+
- valor por defecto: `"router-link-exact-active"`
125+
126+
Configura la clase CSS activa que será aplicada cuando el enlace esté activo con una coincidencia de ruta exacta. Ten en cuenta que el valor por defecto también puede configurarse globalmente a través de la opción `linkExactActiveClass` del constructor del router.
127+
118128
### Aplicar la clase activa al elemento envolvente.
119129

120130
A veces puede que queramos que la clase activa se aplique al elemento envolvente en lugar de aplicarla directamente a la etiqueta `<a>`. En ese caso, puedes renderizar el elemento envolvente utilizando `<router-link>` y luego una etiqueta `<a>` dentro:

docs/es/essentials/navigation.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ Además de utilizar `<router-link>` para crear etiquetas `a` para una navegació
44

55
#### `router.push(location, onComplete?, onAbort?)`
66

7+
**Nota: Dentro de una instancia de Vue, tienes acceso a la instancia del router a través de `$router`. Por lo tanto puedes llamar a `this.$router.push`.**
8+
79
Para navegar a una URL diferente, utiliza `router.push`. Este método agrega una nueva entrada a la pila del historial, por lo que cuando el usuario presione el botón _volver_ del navegador, será llevado a la URL anterior.
810

911
Este método es el que se llama internamente cuando se hace clic en un componente `<router-link>`, por lo que`<router-link :to="...">` es el equivalente a ejecutar `router.push(...)`.

docs/es/essentials/passing-props.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,13 @@ const User = {
2727
const router = new VueRouter({
2828
routes: [
2929
{ path: '/user/:id', component: User, props: true }
30+
31+
// utilizando vistas con nombre, tienes que definir la opción prop para cada una de ellas:
32+
{
33+
path: '/user/:id',
34+
components: { default: User, sidebar: Sidebar },
35+
props: { default: true, sidebar: false }
36+
}
3037
]
3138
})
3239
```

0 commit comments

Comments
 (0)