From 21a0447b5b7ab534c584aa1b17410b188a460706 Mon Sep 17 00:00:00 2001 From: zeratulmdq Date: Fri, 19 May 2017 16:10:39 -0300 Subject: [PATCH 1/3] Spanish additions. Up to date --- docs/es/advanced/data-fetching.md | 35 ++++++++++++--------------- docs/es/advanced/navigation-guards.md | 27 ++++++++++++++++++++- docs/es/api/component-injections.md | 1 + docs/es/api/options.md | 18 ++++++++++++++ docs/es/api/router-instance.md | 18 +++++++++++++- docs/es/api/router-link.md | 10 ++++++++ docs/es/essentials/navigation.md | 2 ++ docs/es/essentials/passing-props.md | 7 ++++++ 8 files changed, 97 insertions(+), 21 deletions(-) diff --git a/docs/es/advanced/data-fetching.md b/docs/es/advanced/data-fetching.md index e8dae4a87..7d34b0d7f 100644 --- a/docs/es/advanced/data-fetching.md +++ b/docs/es/advanced/data-fetching.md @@ -83,31 +83,28 @@ export default { }, beforeRouteEnter (to, from, next) { getPost(to.params.id, (err, post) => { - if (err) { - // muestra algún mensaje global de error - next(false) - } else { - next(vm => { - vm.post = post - }) - } + next(vm => vm.setData(err, post)) }) }, // cuando la ruta cambie y este componente ya haya sido renderizado, // la lógica será ligeramente diferente - watch: { - $route () { - this.post = null - getPost(this.$route.params.id, (err, post) => { - if (err) { - this.error = err.toString() - } else { - this.post = post - } - }) + beforeRouteUpdate (to, from, next) { + this.post = null + getPost(to.params.id, (err, post) => { + this.setData(err, post) + next() + }) + }, + methods: { + setData (err, post) { + if (err) { + this.error = err.toString() + } else { + this.post = post + } } } } ``` -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. +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. diff --git a/docs/es/advanced/navigation-guards.md b/docs/es/advanced/navigation-guards.md index 8c079a752..b38000a4a 100644 --- a/docs/es/advanced/navigation-guards.md +++ b/docs/es/advanced/navigation-guards.md @@ -2,7 +2,7 @@ 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. -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. +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. ### Guardias globales @@ -32,8 +32,18 @@ Cada función guardia recibe tres argumentos: - **`next('/')` o `next({ path: '/' })`**: redirecciona a una ruta diferente. La navegación actual será abortada y una nueva será iniciada. + - **`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()`. + **Asegúrese de llamar siempre a la función `next`, sino el _hook_ nunca será resuelto.** +### Guardias de resolución globales + +> Nuevo en 2.5.0 + +A oartir 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 lamados 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**. + +### 'Hooks after' globales + 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: ``` js @@ -107,3 +117,18 @@ beforeRouteEnter (to, from, next) { ``` 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)`. + +### El flujo de resolución de navegación completo + +1. Se dispara la navegación. +2. Se llaman a los guardias _leave_ en los componentes desactivados. +3. Se llaman a los guardias `beforeEach` globales. +4. Se llaman a los guardias `beforeRouteUpdate` en los componentes reutilizados (2.2+). +5. Se llama a `beforeEnter` en las configuraciones de rutas. +6. Se resuelven componentes de rutas asíncronos. +7. Se llama a `beforeRouteEnter` en los componentes activados. +8. Se llama a los guardias globales `beforeResolve` (2.5+). +9. Se confirma la navegación. +10. Se llaman a los _hook_ globales`afterEach`. +11. Se disparan las actualizaciones del DOM. +12. Se llaman a las _funciones callback_ pasadas a `next` en los guardias `beforeRouteEnter` con las instancias creadas. \ No newline at end of file diff --git a/docs/es/api/component-injections.md b/docs/es/api/component-injections.md index d7dab556f..686ddf716 100644 --- a/docs/es/api/component-injections.md +++ b/docs/es/api/component-injections.md @@ -15,6 +15,7 @@ Estas propiedades son inyectadas dentro de cada componente hijo pasando la insta ### Opciones habilitadas - **beforeRouteEnter** +- **beforeRouteUpdate** (agregado en 2.2) - **beforeRouteLeave** Más información en [guardias en componentes](../advanced/navigation-guards.md#incomponent-guards). diff --git a/docs/es/api/options.md b/docs/es/api/options.md index 6d9fe2817..8072d79b0 100644 --- a/docs/es/api/options.md +++ b/docs/es/api/options.md @@ -53,6 +53,16 @@ Configura globalmente la clase activa por defecto de ``. Más información en [router-link](router-link.md). +### linkExactActiveClass + +> 2.5.0+ + +- tipo: `string` + +- valor por defecto: `"router-link-exact-active"` + + Configura globalmente la clase activa de `` para coincidencias de rutas exactas. Más información en [router-link](router-link.md). + ### scrollBehavior - tipo: `Function` @@ -68,3 +78,11 @@ ``` Para más detalles, [comportamiento del scroll](../advanced/scroll-behavior.md). + +### parseQuery / stringifyQuery + +> 2.4.0+ + +- tipo: `Function` + + Provee funciones parse / stringify para _query string_ personalizadas. Sobre escribe la función por defecto. diff --git a/docs/es/api/router-instance.md b/docs/es/api/router-instance.md index 382aa472c..9f9675cbf 100644 --- a/docs/es/api/router-instance.md +++ b/docs/es/api/router-instance.md @@ -23,10 +23,12 @@ ### Métodos - **router.beforeEach(guard)** +- **router.beforeResolve(guard)** (2.5.0+) - **router.afterEach(hook)** Agrega guardias de navegación globales. Info: [guardias de navegación](../advanced/navigation-guards.md). + A partir de la versión 2.5.0 los tres métodos devuelven una función que elimina el guardia/hook registrado. - **router.push(location, onComplete?, onAbort?)** - **router.replace(location, onComplete?, onAbort?)** @@ -60,10 +62,24 @@ 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`. -- **router.onReady(callback)** +- **router.onReady(callback, [errorCallback])** > 2.2.0+ 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. Esto es útil en el renderizado del lado servidor para asegurar un resultado consistente tanto en el servidor como en el cliente. + + 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). + +- **router.onError(callback)** + + > 2.4.0+ + + 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: + + - El error es lanzado sincrónicamente dentro de una función de guardia de ruta; + + - El error es capturado y manejado asíncronamente llamando a `next(err)` dentro de una función de guardia de ruta; + + - El error ocurre cuando se intenta resolver un componente asíncrono que es necesario para renderizar una ruta. diff --git a/docs/es/api/router-link.md b/docs/es/api/router-link.md index b7eed152c..009fe01e3 100644 --- a/docs/es/api/router-link.md +++ b/docs/es/api/router-link.md @@ -115,6 +115,16 @@ Es preferible utilizar `` en lugar de escribir directamente ` 2.5.0+ + + - tipo: `string` + + - valor por defecto: `"router-link-exact-active"` + + 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. + ### Aplicar la clase activa al elemento envolvente. A veces puede que queramos que la clase activa se aplique al elemento envolvente en lugar de aplicarla directamente a la etiqueta ``. En ese caso, puedes renderizar el elemento envolvente utilizando `` y luego una etiqueta `` dentro: diff --git a/docs/es/essentials/navigation.md b/docs/es/essentials/navigation.md index cd6b3a96e..70f2e4a41 100644 --- a/docs/es/essentials/navigation.md +++ b/docs/es/essentials/navigation.md @@ -4,6 +4,8 @@ Además de utilizar `` para crear etiquetas `a` para una navegació #### `router.push(location, onComplete?, onAbort?)` +**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`.** + 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. Este método es el que se llama internamente cuando se hace clic en un componente ``, por lo que`` es el equivalente a ejecutar `router.push(...)`. diff --git a/docs/es/essentials/passing-props.md b/docs/es/essentials/passing-props.md index e33aedc14..330f06a74 100644 --- a/docs/es/essentials/passing-props.md +++ b/docs/es/essentials/passing-props.md @@ -27,6 +27,13 @@ const User = { const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, props: true } + + // utilizando vistas con nombre, tienes que definir la opción prop para cada una de ellas: + { + path: '/user/:id', + components: { default: User, sidebar: Sidebar }, + props: { default: true, sidebar: false } + } ] }) ``` From 0ac76844bd92dd36fa2a30cb5074ad6a63237111 Mon Sep 17 00:00:00 2001 From: zeratulmdq Date: Mon, 22 May 2017 09:53:43 -0300 Subject: [PATCH 2/3] Changes requested 2017-05-21 --- docs/es/advanced/navigation-guards.md | 6 +++--- docs/es/api/options.md | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/es/advanced/navigation-guards.md b/docs/es/advanced/navigation-guards.md index b38000a4a..40c217062 100644 --- a/docs/es/advanced/navigation-guards.md +++ b/docs/es/advanced/navigation-guards.md @@ -40,11 +40,11 @@ Cada función guardia recibe tres argumentos: > Nuevo en 2.5.0 -A oartir 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 lamados 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**. +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**. -### 'Hooks after' globales +### Post _hooks_ globales -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: +También puedes registrar _hooks_ globales que se ejecutarán luego 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: ``` js router.afterEach((to, from) => { diff --git a/docs/es/api/options.md b/docs/es/api/options.md index 8072d79b0..9310a14d7 100644 --- a/docs/es/api/options.md +++ b/docs/es/api/options.md @@ -85,4 +85,4 @@ - tipo: `Function` - Provee funciones parse / stringify para _query string_ personalizadas. Sobre escribe la función por defecto. + Provee funciones parse / stringify para _query string_ personalizadas. Sobreescribe la función por defecto. From df86d0e1b2b60a8eaff505e19bb9bb226e2fa335 Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Mon, 22 May 2017 15:53:14 +0200 Subject: [PATCH 3/3] Update navigation-guards.md --- docs/es/advanced/navigation-guards.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/es/advanced/navigation-guards.md b/docs/es/advanced/navigation-guards.md index 40c217062..4f6dbf416 100644 --- a/docs/es/advanced/navigation-guards.md +++ b/docs/es/advanced/navigation-guards.md @@ -44,7 +44,7 @@ A partir de la versión 2.5.0 puedes registrar un guardia global con `router.bef ### Post _hooks_ globales -También puedes registrar _hooks_ globales que se ejecutarán luego 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: +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: ``` js router.afterEach((to, from) => { @@ -131,4 +131,4 @@ Puedes acceder directamente a `this` dentro de `beforeRouteLeave`. La guardia _l 9. Se confirma la navegación. 10. Se llaman a los _hook_ globales`afterEach`. 11. Se disparan las actualizaciones del DOM. -12. Se llaman a las _funciones callback_ pasadas a `next` en los guardias `beforeRouteEnter` con las instancias creadas. \ No newline at end of file +12. Se llaman a las _funciones callback_ pasadas a `next` en los guardias `beforeRouteEnter` con las instancias creadas.