From 9a58023f4a956defd684713fdd25bf7d3263b750 Mon Sep 17 00:00:00 2001 From: zeratulmdq Date: Thu, 9 Feb 2017 17:48:31 -0300 Subject: [PATCH 1/7] Complete spanish translation --- docs/LANGS.md | 1 + docs/es/README.md | 1 + docs/es/SUMMARY.md | 31 ++++++ docs/es/advanced/data-fetching.md | 113 ++++++++++++++++++++ docs/es/advanced/lazy-loading.md | 44 ++++++++ docs/es/advanced/meta.md | 51 +++++++++ docs/es/advanced/navigation-guards.md | 109 +++++++++++++++++++ docs/es/advanced/scroll-behavior.md | 61 +++++++++++ docs/es/advanced/transitions.md | 58 ++++++++++ docs/es/api/component-injections.md | 20 ++++ docs/es/api/options.md | 70 +++++++++++++ docs/es/api/route-object.md | 89 ++++++++++++++++ docs/es/api/router-instance.md | 69 ++++++++++++ docs/es/api/router-link.md | 128 +++++++++++++++++++++++ docs/es/api/router-view.md | 27 +++++ docs/es/essentials/dynamic-matching.md | 62 +++++++++++ docs/es/essentials/getting-started.md | 68 ++++++++++++ docs/es/essentials/history-mode.md | 60 +++++++++++ docs/es/essentials/named-routes.md | 31 ++++++ docs/es/essentials/named-views.md | 29 +++++ docs/es/essentials/navigation.md | 69 ++++++++++++ docs/es/essentials/nested-routes.md | 99 ++++++++++++++++++ docs/es/essentials/passing-props.md | 72 +++++++++++++ docs/es/essentials/redirect-and-alias.md | 58 ++++++++++ docs/es/installation.md | 44 ++++++++ 25 files changed, 1464 insertions(+) create mode 100644 docs/es/README.md create mode 100644 docs/es/SUMMARY.md create mode 100644 docs/es/advanced/data-fetching.md create mode 100644 docs/es/advanced/lazy-loading.md create mode 100644 docs/es/advanced/meta.md create mode 100644 docs/es/advanced/navigation-guards.md create mode 100644 docs/es/advanced/scroll-behavior.md create mode 100644 docs/es/advanced/transitions.md create mode 100644 docs/es/api/component-injections.md create mode 100644 docs/es/api/options.md create mode 100644 docs/es/api/route-object.md create mode 100644 docs/es/api/router-instance.md create mode 100644 docs/es/api/router-link.md create mode 100644 docs/es/api/router-view.md create mode 100644 docs/es/essentials/dynamic-matching.md create mode 100644 docs/es/essentials/getting-started.md create mode 100644 docs/es/essentials/history-mode.md create mode 100644 docs/es/essentials/named-routes.md create mode 100644 docs/es/essentials/named-views.md create mode 100644 docs/es/essentials/navigation.md create mode 100644 docs/es/essentials/nested-routes.md create mode 100644 docs/es/essentials/passing-props.md create mode 100644 docs/es/essentials/redirect-and-alias.md create mode 100644 docs/es/installation.md diff --git a/docs/LANGS.md b/docs/LANGS.md index 6509bb8b9..6654d54e8 100644 --- a/docs/LANGS.md +++ b/docs/LANGS.md @@ -4,4 +4,5 @@ * [2.0 - German](de/) * [2.0 - Русский](ru/) * [2.0 - 한국어(Korean)](kr/) +* [2.0 - Español](es/) * [0.7 Docs](old/) diff --git a/docs/es/README.md b/docs/es/README.md new file mode 100644 index 000000000..f8a898044 --- /dev/null +++ b/docs/es/README.md @@ -0,0 +1 @@ +{% include "./SUMMARY.md" %} diff --git a/docs/es/SUMMARY.md b/docs/es/SUMMARY.md new file mode 100644 index 000000000..c652aa9a3 --- /dev/null +++ b/docs/es/SUMMARY.md @@ -0,0 +1,31 @@ +# vue-router 2 + +> Notas: vue-router@2.x funciona solamente con Vue 2.x. La documentación para la versión 0.7.x está [aquí (en inglés)](https://github.com/vuejs/vue-router/tree/1.0/docs/en). + +**[Notas de lanzamiento](https://github.com/vuejs/vue-router/releases)** + +- [Instalación](installation.md) +- Esenciales + - [Empezando](essentials/getting-started.md) + - [Coincidencia diámica de rutas](essentials/dynamic-matching.md) + - [Rutas anidadas](essentials/nested-routes.md) + - [Navegación programática](essentials/navigation.md) + - [Rutas con nombre](essentials/named-routes.md) + - [Vistas con nombre](essentials/named-views.md) + - [Redireccionamiento y alias](essentials/redirect-and-alias.md) + - [Pasando Props a componentes de ruteo](essentials/passing-props.md) + - [Modo historial HTML5](essentials/history-mode.md) +- Avanzada + - [Guardias de navegación](advanced/navigation-guards.md) + - [Campos Meta en las rutas](advanced/meta.md) + - [Transiciones](advanced/transitions.md) + - [Obtención de datos](advanced/data-fetching.md) + - [Comportamiento del desplazamiento](advanced/scroll-behavior.md) + - [Carga diferida](advanced/lazy-loading.md) +- API + - [router-link](api/router-link.md) + - [router-view](api/router-view.md) + - [El objeto Route](api/route-object.md) + - [Opciones del constructor de Router](api/options.md) + - [La instancia de Router](api/router-instance.md) + - [Inyección de componentes](api/component-injections.md) diff --git a/docs/es/advanced/data-fetching.md b/docs/es/advanced/data-fetching.md new file mode 100644 index 000000000..b5cf39b09 --- /dev/null +++ b/docs/es/advanced/data-fetching.md @@ -0,0 +1,113 @@ +# Obtención de datos + +Puede que necesite obtener datos desde el servidor cuando una ruta es activada. Por ejemplo, antes de renderizar un perfil de usuario, puede obtener la información de ese usuario desde el servidor. Podemos lograr esto de dos maneras diferentes: + +- **Obtener la información después de la navegación**: realice la navegación primero y luego obtenga los datos en el _hook_ del ciclo de vida del componente entrante. Muestre algún tipo de indicador de carga mientras espera llegada de la información. + +- **Obtener la información antes de la navegación**: Obtenga los datos antes de la navegación en el guardia de entrada de la ruta, y realice la navegación luego de haberla obtenido. + +Técnicamente, ambas opciones son válidas - depende de la experiencia de usuario a la que apunte. + +## Obtener la información después de la navegación + +Cuando utilizamos este enfoque, navegamos y renderizamos el componente entrante inmediatamente, y obtenemos los datos en el _hook_ `create` del componente. Nos posibilita mostrar un indicador de estado de carga mientras se obtiene la información a través de la red, y también podemos manejar la carga de datos de manera diferente para cada vista. + +Asumamos que tenemos un componente `Post` que necesita obtener datos de un _post_ basándose en `$route.params.id`: + +``` html + +``` + +``` js +export default { + data () { + return { + loading: false, + post: null, + error: null + } + }, + created () { + // obtener los datos cuando la vista es creada y _data_ ya + // está siendo observada + this.fetchData() + }, + watch: { + // ejecutar nuevamente el método si la ruta cambia + '$route': 'fetchData' + }, + methods: { + fetchData () { + this.error = this.post = null + this.loading = true + // reemplace getPost con lo que corresponda + getPost(this.$route.params.id, (err, post) => { + this.loading = false + if (err) { + this.error = err.toString() + } else { + this.post = post + } + }) + } + } +} +``` + +## Obtener la información antes de la navegación + +Con este enfoque, obtenemos la información antes de navegar a la nueva ruta. Podemos obtener los datos en el guardia `beforeRouteEnter` en el componente entrante, y solo ejecutar `next` cuando se haya completado: + +``` js +export default { + data () { + return { + post: null, + error: null + } + }, + beforeRouteEnter (to, from, next) { + getPost(to.params.id, (err, post) => { + if (err) { + // mostrar algún mensaje global de error + next(false) + } else { + next(vm => { + vm.post = 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 + } + }) + } + } +} +``` + +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 mensaje global de advertencia. diff --git a/docs/es/advanced/lazy-loading.md b/docs/es/advanced/lazy-loading.md new file mode 100644 index 000000000..9cb578564 --- /dev/null +++ b/docs/es/advanced/lazy-loading.md @@ -0,0 +1,44 @@ +# Carga diferida de rutas + +Cuando se construyen aplicaciones con un sistema de empaquetamiento de módulos, el archivo JavaScript resultante puede terminar siendo muy grande, afectando los tiempos de carga de la página. Sería más eficiente si pudiesemos dividir los componentes de cada ruta en porciones separadas y cargarlas solo cuando esa ruta es visitada. + +Combinando [las características asíncronas de componentes de Vue](http://vuejs.org/guide/components.html#Async-Components) y las características de división de código de [Webpack](https://webpack.js.org/guides/code-splitting-require/), es trivial la carga diferida de componentes de ruta. + +Todo lo que necesitamos es definir nuestros componentes de rutas como asíncronos: + +``` js +const Foo = resolve => { + // require.ensure es la sintaxis especial de Webpack para indicar un punto de división de código. + require.ensure(['./Foo.vue'], () => { + resolve(require('./Foo.vue')) + }) +} +``` + +Hay una alternativa a la sintaxis de división de código utilizando _require_ como lo hace AMD, por lo que puede simplificarse como: + +``` js +const Foo = resolve => require(['./Foo.vue'], resolve) +``` + +Nada debe cambiarse en la configuración del enrutador, simplemente utilice `Foo` normalmente: + +``` js +const router = new VueRouter({ + routes: [ + { path: '/foo', component: Foo } + ] +}) +``` + +### Agrupando componentes en la misma porción + +A veces deseamos agrupar todos los componentes bajo la misma ruta en la misma porción asíncrona. Para lograr esto, necesitamos usar [porciones con nombre](https://webpack.js.org/guides/code-splitting-require/#chunkname) proveyendo un nombre de porción a `require.ensure` como el tercer argumento: + +``` js +const Foo = r => require.ensure([], () => r(require('./Foo.vue')), 'group-foo') +const Bar = r => require.ensure([], () => r(require('./Bar.vue')), 'group-foo') +const Baz = r => require.ensure([], () => r(require('./Baz.vue')), 'group-foo') +``` + +Webpack agrupará los módulos asíncronos con el mismo nombre dentro de la misma porción asíncrona - esto también significa que no necesitamos más listar explícitamente las dependencias de `require.ensure` (por lo tanto pasamos un arreglo vacio). \ No newline at end of file diff --git a/docs/es/advanced/meta.md b/docs/es/advanced/meta.md new file mode 100644 index 000000000..d2a00c956 --- /dev/null +++ b/docs/es/advanced/meta.md @@ -0,0 +1,51 @@ +# Campos Meta en las rutas + +Puede incluir un campo `meta` cuando defina una ruta: + +``` js +const router = new VueRouter({ + routes: [ + { + path: '/foo', + component: Foo, + children: [ + { + path: 'bar', + component: Bar, + // campo meta + meta: { requiresAuth: true } + } + ] + } + ] +}) +``` + +Entonces, ¿como accedemos al campo `meta`? + +Primero, cada objeto route en la configuración de `routes` se llama **registro de ruta**. Los registros de ruta pueden estar anidados. Por lo tanto, cuando una ruta coincida, existe la posibilidad que lo haga con más de un registro de ruta. + +Por ejemplo, con la configuración anterior, la URL `/foo/bar` coincidirá tanto con el registro de ruta padre como con el hijo. + +Todos los registros de rutas que hayan coincidido son expuestos en el objeto `$route` (y también a los objetos route en los guardias de navegación) como el arreglo `$route.matched`. Por ende, necesitaremos iterar sobre `$route.matched` para verificar campos meta en los registros de rutas. + +Un caso de uso de ejemplo es verificar la existencia de campos metas en los guardias de navegación global: + +``` js +router.beforeEach((to, from, next) => { + if (to.matched.some(record => record.meta.requiresAuth)) { + // esta ruta requiere autentiación, verificamos que haya iniciado sesión + // sino, redirigimos a la página de inicio de sesión. + if (!auth.loggedIn()) { + next({ + path: '/login', + query: { redirect: to.fullPath } + }) + } else { + next() + } + } else { + next() // ¡Asegúrese de ejecutar next siempre! + } +}) +``` diff --git a/docs/es/advanced/navigation-guards.md b/docs/es/advanced/navigation-guards.md new file mode 100644 index 000000000..dddeb44c0 --- /dev/null +++ b/docs/es/advanced/navigation-guards.md @@ -0,0 +1,109 @@ +# Guardias de navegación + +Como el nombre sugiere, los guardias de navegación provistas por `vue-router` son básicamente utilizadas para proteger rutas de navegación ya sea redireccionando o cancelandolas. Hay varias maneras de engancharse en el proceso de navegación de rutas: globalmente, por ruta o dentro de los componentes. + +Recuerde **Los cambios en los parámetros o las _queries_ no harán que se ejecuten los guardias de navegación**. Simplemente [observe el objeto `$route`](../essentials/dynamic-matching.md#reacting-to-params-changes) para obtener reactividad frente a esos cambios. + +### Guardias globales + +Puede registrar guardias _before_ globales usando `router.beforeEach`: + +``` js +const router = new VueRouter({ ... }) + +router.beforeEach((to, from, next) => { + // ... +}) +``` + +Los guardias _before_ globales son llamados por orden de creación, cuando una navegación es disparada. Los guardias pueden ejecutarse asincrónicamente, y la navegación se considera **pendiente** antes que todos los _hooks_ sean resueltos. + +Cada función guardia recibe tres argumentos: + +- **`to: Route`**: el [Objeto Route](../api/route-object.md) hacia donde se navega. + +- **`from: Route`**: la ruta actual desde la cual se navega. + +- **`next: Function`**: esta función debe ser ejecutada para **resolver** el _hook_. La acción a realizar depende de los argumentos provistos a `next`: + + - **`next()`**: moverse al siguiente _hook_ en la cadena. Si no queda ninguno, la navegación se **confirma**. + + - **`next(false)`**: cancelar la navegación actual. Si la URL en el navegador cambió (ya sea manualmente o a través del botón _atrás_), será reseteada al valor de la ruta `from`. + + - **`next('/')` o `next({ path: '/' })`**: redirecciona a una ruta diferente. La navegación actual será abortada y una nueva será iniciada. + +**Asegúrese de llamar siempre a la función `next`, de otra manera el _hook_ nunca será resuelto.** + +También puede registrar _hooks after_ globales. 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) => { + // ... +}) +``` + +### Guardias por ruta + +Puede definier guardias `beforeEnter` directamente en el objeto de configuración de una ruta: + +``` js +const router = new VueRouter({ + routes: [ + { + path: '/foo', + component: Foo, + beforeEnter: (to, from, next) => { + // ... + } + } + ] +}) +``` + +Estos guardias tienen exactamente la misma firma que los guardias _before_ globales. + +### Guardias en componentes + +Por último, puede directamente definir guardias de navegación dentro de los componentes de ruta (los que son pasados a la configuración del enrutador) con las siguientes opciones: + +- `beforeRouteEnter` +- `beforeRouteUpdate` (agregado en la versión 2.2) +- `beforeRouteLeave` + +``` js +const Foo = { + template: `...`, + beforeRouteEnter (to, from, next) { + // se llama antes que la ruta que renderiza este componente sea confirmada. + // NO tiene acceso a la instancia del componente `this`, + // ¡porque no ha sido creada todavía cuando este guardia es ejecutado! + }, + beforeRouteUpdate (to, from, next) { + // se llama cuando la ruta que renderiza este componente ha cambiado, + // pero este componente es reusado en la nueva ruta. + // Por ejemplo, para una ruta con parámetros dinámicos /foo/:id, cuando + // navegamos desde /foo/1 havia /foo/2, la misma instancia del componente Foo + // será reusada, y este _hook_ será llamado cuando eso suceda. + // Tiene acceso a la instancia del componente `this` + }, + beforeRouteLeave (to, from, next) { + // se llama cuando la ruta que renderiza el componente está por ser + // abandonada. + // Tiene acceso a la instancia del componente `this` + } +} +``` + +El guardia `beforeRouteEnter` **NO** tiene acceso a `this`, porque es ejecutado antes que la navegación sea confirmada, por lo tanto el componente destino todavía no ha sido creado. + +Sin embargo, puede acceder a la instancia pasando una _callback_ a `next`. La _callback_ se ejecutará cuando la navegación sea confirmada, y la instancia del componente será pasada como argumento: + +``` js +beforeRouteEnter (to, from, next) { + next(vm => { + // acceda a la instancia del componente a través de `vm` + }) +} +``` + +Puede acceder directamente a `this` dentro de `beforeRouteLeave`. El guardia _leave_ se usa normalmente para prevenir al usuario cuando intenta abandonar la ruta accidentalmente sin guardar cambios. La navegación puede ser cancelada ejecutando `next(false)`. diff --git a/docs/es/advanced/scroll-behavior.md b/docs/es/advanced/scroll-behavior.md new file mode 100644 index 000000000..dc1452a33 --- /dev/null +++ b/docs/es/advanced/scroll-behavior.md @@ -0,0 +1,61 @@ +# Comportamiento del desplazamiento + +Cuando se utiliza enturamiento del lado cliente, podemos querer desplazarnos hacia el inicio de la página cuando naveguemos a una nueva ruta, o preservar la posicón actual, tal cual lo hace una recarga de la página. `vue-router` le permite lograr esto e incluso más, le permite personalizar completamente el comportamiento del desplazamiento en las navegaciones. + +**Nota: esta característica solo funciona en el modo historial de HTML5.** + +Cuando cree una instancia del enrutador, puede incluir la función `scrollBehavior`: + +``` js +const router = new VueRouter({ + routes: [...], + scrollBehavior (to, from, savedPosition) { + // devolver la posición deseada + } +}) +``` + +La función `scrollBehavior` recibe los objetos de ruta `to` y `from`. El tercer argumento, `savedPosition`, solo está disponible si estamos en una navegación `popstate` (cuando se utilizan los botones _atras_ o _adelante_ en el navegador). + +La función puede devolver un objeto de posición de desplazamiento. EL objeto puede ser de la forma: + +- `{ x: number, y: number }` +- `{ selector: string }` + +Si se devuelve un valor *falso* o un objeto vacio, no ocurrirá ningún desplazamiento. + +Por ejemplo: + +``` js +scrollBehavior (to, from, savedPosition) { + return { x: 0, y: 0 } +} +``` + +Esto hará que la página se desplace hacia el inicio para todas las navegaciones a la ruta. + +Devolver `savedPosition` hará que el comportamiento cuando se utilicen los botones _atras_ o _adelante_ sea el nativo: + +``` js +scrollBehavior (to, from, savedPosition) { + if (savedPosition) { + return savedPosition + } else { + return { x: 0, y: 0 } + } +} +``` + +Si desea simular el desplazamiento a anclas: + +``` js +scrollBehavior (to, from, savedPosition) { + if (to.hash) { + return { + selector: to.hash + } + } +} +``` + +También podemos utilizar [campos meta](meta.md) para implementar un control de desplazamientoto fino. Vea un ejemplo completo [aquí](https://github.com/vuejs/vue-router/blob/dev/examples/scroll-behavior/app.js). diff --git a/docs/es/advanced/transitions.md b/docs/es/advanced/transitions.md new file mode 100644 index 000000000..b31f6b9fd --- /dev/null +++ b/docs/es/advanced/transitions.md @@ -0,0 +1,58 @@ +# Transiciones + +Dado que `` es esencialmente un componente dinámico, podemos aplicarle efectos de transición utilizando el componente ``: + +``` html + + + +``` + +[Todo acerca de ``](http://vuejs.org/guide/transitions.html) también funciona aquí. + +### Transiciones por ruta + +El ejemplo anterior aplicará la misma transición a todas las rutas. Si desea que cada componente de ruta tenga diferentes transiciones, puede utilizar `` con diferentes nombres dentro de cada componente de ruta: + +``` js +const Foo = { + template: ` + +
...
+
+ ` +} + +const Bar = { + template: ` + +
...
+
+ ` +} +``` + +### Transiciones dinámicas basadas en componentes + +También es posible determinar dinámicamente la transición a utilizar basado en las relaciones entre la ruta destino y la ruta actual: + +``` html + + + + +``` + +``` js +// luego, en el componente padre, +// observe $route para determinar que transición utilizar +watch: { + '$route' (to, from) { + const toDepth = to.path.split('/').length + const fromDepth = from.path.split('/').length + this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left' + } +} +``` + +Vea un ejemplo completo [aquí](https://github.com/vuejs/vue-router/blob/dev/examples/transitions/app.js). diff --git a/docs/es/api/component-injections.md b/docs/es/api/component-injections.md new file mode 100644 index 000000000..f33750156 --- /dev/null +++ b/docs/es/api/component-injections.md @@ -0,0 +1,20 @@ +# Inyección de componentes + +### Propiedades inyectadas + +Estas propiedades son inyectadas dentro de cada componente hijo pasando la instancia del enrutador a la instancia principal como la opción `router`. + +- #### $router + + La instancia del enrutador. + +- #### $route + + El objeto [Route activo](route-object.md). Esta propiedad es de solo lectura y sus propiedades son inmutables, pero puede ser observada. + +### Opciones habilitadas + +- **beforeRouteEnter** +- **beforeRouteLeave** + + Vea [Guardias en componentes](../advanced/navigation-guards.md#incomponent-guards). diff --git a/docs/es/api/options.md b/docs/es/api/options.md new file mode 100644 index 000000000..3f5a08e81 --- /dev/null +++ b/docs/es/api/options.md @@ -0,0 +1,70 @@ +# Opciones del constructor de Router + +### routes + +- tipo: `Array` + + Declaración de tipos para `RouteConfig`: + + ``` js + declare type RouteConfig = { + path: string; + component?: Component; + name?: string; // para rutas con nombre + components?: { [name: string]: Component }; // para vistas con nombre + redirect?: string | Location | Function; + props?: boolean | string | Function; + alias?: string | Array; + children?: Array; // para rutas anidadas + beforeEnter?: (to: Route, from: Route, next: Function) => void; + meta?: any; + } + ``` + +### mode + +- tipo: `string` + +- valor por defecto: `"hash" (in browser) | "abstract" (in Node.js)` + +- valores disponibles: `"hash" | "history" | "abstract"` + + Configura el modo del enrutador. + + - `hash`: utiliza el _hash_ en la URL para el enrutamiento. Funciona en todos los navegadores que soportan Vue, incluidos aquellos que no soportan la API de historial de HTML5 . + + - `history`: requiere la API de historial de HTML y configuración del lado servidor. Vea [Modo historial HTML5](../essentials/history-mode.md). + + - `abstract`: funciona en todos los ambientes de JavaScript, por ejemplo, del lado servidor con Node.js. **Se forzará este modo de trabajo en el enrutador si no se detecta la API de navegador.** + +### base + +- tipo: `string` + +- valor por defecto: `"/"` + + La URL base para la aplicación. Por ejemplo, si toda la aplicación se encuentra dentro de `/app/`, entonces `base` debería llevar ese valor. + +### linkActiveClass + +- tipo: `string` + +- valor por defecto: `"router-link-active"` + + Configura globalmente la clase activa por defecto de ``. Vea también [router-link](router-link.md). + +### scrollBehavior + +- tipo: `Function` + + Firma: + + ``` + ( + to: Route, + from: Route, + savedPosition?: { x: number, y: number } + ) => { x: number, y: number } | { selector: string } | ?{} + ``` + + Para más detalles vea [Comportamiento del desplazamiento](../advanced/scroll-behavior.md). diff --git a/docs/es/api/route-object.md b/docs/es/api/route-object.md new file mode 100644 index 000000000..4160e0611 --- /dev/null +++ b/docs/es/api/route-object.md @@ -0,0 +1,89 @@ +# El objeto Route + +Un **objeto de ruta** representa el estado de la ruta activa actualmente. Contiene información analizada de la URL actual y los **registros de rutas** que coinciden con ella. + +El objeto ruta es inmutable. Cada navegación exitosa resultará en un nuevo objeto de ruta. + +El objeto de ruta puede encontrarse en diferentes lugares. + +- Dentro de los componentes, como `this.$route` + +- Dentro de las _callbacks_ de observación de `$route` + +- Como valor de retorno de la función `router.match(location)` + +- Dentro de los guardias de navegación como los primeros dos argumentos: + + ``` js + router.beforeEach((to, from, next) => { + // to y from son objetos de ruta + }) + ``` + +- Dentro de la función `scrollBehavior`como los primeros dos argumentos: + + ``` js + const router = new VueRouter({ + scrollBehavior (to, from, savedPosition) { + // to y from son objetos de ruta + } + }) + ``` + +### Propiedades del objeto Ruta + +- **$route.path** + + - tipo: `string` + + Una cadena de texto equivalente a la ruta actual, siempre resuelta como una ruta absoluta. Por ejemplo`"/foo/bar"`. + +- **$route.params** + + - tipo: `Object` + + Un objeto que contiene pares llave/valor de segmentos dinámicos y segmentos estrella. Si no hay parametros, el valor será un objeto vacio. + +- **$route.query** + + - tipo: `Object` + + Un objeto que contiene pares llave/valor del _query string_. Por ejemplo, para la ruta `/foo?user=1`, obtendremos `$route.query.user == 1`. Si no hay _query string_ el valor será un objeto vacio. + +- **$route.hash** + + - tipo: `string` + + El _hash_ de la ruta actual (con la `#`), si posee. Si no hay un _hash_ el valor será una cadena de texto vacia. + +- **$route.fullPath** + + - tipo: `string` + + La URL completa incluyendo _query_ y _hash_. + +- **$route.matched** + + - tipo: `Array` + + Un arreglo que contiene **registro de ruta** para todos los segmentos anidados de la ruta actual. Los registros de ruta son copias de los objetos en el arreglo de configuración `routes` (y en los arreglos `children`): + + ``` js + const router = new VueRouter({ + routes: [ + // el siguiente objeto es un registro de ruta + { path: '/foo', component: Foo, + children: [ + // este también es un registro de ruta + { path: 'bar', component: Bar } + ] + } + ] + }) + ``` + + Cuando la URL es `/foo/bar`, `$route.matched` será un arreglo que contendrá ambos objetos (clonados), en orden descendente de padre a hijo. + +- **$route.name** + + El nombre de la ruta acutal, si tiene. (Vea [Rutas con nombre](../essentials/named-routes.md)) diff --git a/docs/es/api/router-instance.md b/docs/es/api/router-instance.md new file mode 100644 index 000000000..62c549390 --- /dev/null +++ b/docs/es/api/router-instance.md @@ -0,0 +1,69 @@ +# La instancia de Router + +### Propiedades + +#### router.app + +- tipo: `Vue instance` + + La instancia principal de Vue donde `router` fue inyectado. + +#### router.mode + +- tipo: `string` + + El [modo](options.md#mode) que el enrutador está utilizando. + +#### router.currentRoute + +- tipo: `Route` + + La ruta actual representada como un [objeto Route](route-object.md). + +### Métodos + +- **router.beforeEach(guard)** +- **router.afterEach(hook)** + + Agrega guardias de navegación globales. Vea [Guardias de navegación](../advanced/navigation-guards.md). + + +- **router.push(location, onComplete?, onAbort?)** +- **router.replace(location, onComplete?, onAbort?)** +- **router.go(n)** +- **router.back()** +- **router.forward()** + + Navega programáticamente a una nueva URL. Vea [navegación programática](../essentials/navigation.md). + +- **router.getMatchedComponents(location?)** + + Devuelve un arreglo de componentes (definiciones/constructores, no instancias) que coincidan con la ubicación provista o la ruta actual. Se utiliza principalmente durante el renderizado del lado servidor para realizar precarga de datos. + +- **router.resolve(location, current?, append?)** + + > 2.1.0+ + + Resolución inversa de URL. Dada una ubicación de la misma forma que las usadas en ``, devuelve un objeto con las siguiente propiedades: + + ``` js + { + location: Location; + route: Route; + href: string; + } + ``` + +- **router.addRoutes(routes)** + + > 2.2.0+ + + Agrega dinámicamente más rutas al enrutador. El argumento debe ser un arreglo utilizando el mismo formato de configuración que las opciones del constructor de `routes`. + +- **router.onReady(callback)** + + > 2.2.0+ + + Este método pone una _callback_ en espera a ser llamada cuando el enrutador 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. diff --git a/docs/es/api/router-link.md b/docs/es/api/router-link.md new file mode 100644 index 000000000..7abb3be56 --- /dev/null +++ b/docs/es/api/router-link.md @@ -0,0 +1,128 @@ +# `` + +`` es el componente para posibilitar la navegación de los usuarios en una aplicación con el enrutador habilitado. La ubicación destino se especifica con la propiedad `to`. Por defecto, renderiza una etiqueta `` en el atributo `href` correspondiente, pero puede configurarse con la propiedad `tag`. Además, el enlace obtiene una clase CSS cuando la ruta a la que apunta es activada. + +Es preferible utilizar `` en lugar de escribir directamente `` por las siguientes razones: + +- Funciona de la misma manera tanto en el modo _hash_ como en el modo historial de HTML5, por lo que si decide intercambiar modos, o cuando el router utiliza el modo _hash_ en IE9, no deberá cambiar nada. + +- En el modo historial de HTML5, `router-link` interceptará el evento _click_ para que el navegador no intente recargar la página. + +- Cuando este utilizando la opción `base` en el modo historial de HTML5, no necesita incluirla en la URL de la propiedad `to`. + +### Propiedades + +- **to** + + - tipo: `string | Location` + + - requerida + + Identifica la ruta destino del enlace. Cuando es accedida, el valor de la propiedad `to` será pasada a `router.push()` internamente, por lo que el valor puede ser tanto una cadena de texto como un objeto descriptor de ubicación. + + ``` html + + Home + + Home + + + Home + + + Home + + + Home + + + User + + + Register + ``` + +- **replace** + + - tipo: `boolean` + + - valor por defecto: `false` + + Establecer la propiedad `replace` ejecutará `router.replace()` en lugar de `router.push()` cuando se acceda, por lo que la navegación no dejará un registro en el historial. + + ``` html + + ``` + +- **append** + + - tipo: `boolean` + + - valor por defecto: `false` + + Establecer la propiedad `append` hará que se agregue la ruta relativa a la ruta actual. Por ejemplo, asumiendo que estamos navegando desde `/a` a un enlace relativo `b`, sin `append` accederemos a `/b`, pero con `append` accederemos a `/a/b`. + + ``` html + + ``` + +- **tag** + + - tipo: `string` + + - valor por defecto: `"a"` + + A veces puede querer que `` se renderice como otra etiqueta, por ejemplo `
  • `. Puede utilizar la propiedad `tag` para especificar que etiqueta renderizar, y seguirá escuchando eventos _click_ para la navegación. + + ``` html + foo + +
  • foo
  • + ``` + +- **active-class** + + - tipo: `string` + + - valor por defecto: `"router-link-active"` + + Configura la clase CSS que se aplicará al enlace cuando este activo. Note que el valor por defecto puede ser configurado de manera global a través de la opción `linkActiveClass` del constructor del enrutador. + +- **exact** + + - tipo: `boolean` + + - valor por defecto: `false` + + El comportamiento por defecto para la aplicación de la clase CSS activa en las coincidencias de rutas es **inclusivo**. Por ejemplo, `` obtendrá la clase CSS mientras la ruta actual comience con `/a/` o sea `/a`. + + Una consecuencia de esto es que `` ¡permanecerá activa para todas las rutas! Para forzar una coincidencia exacta, utilice la propiedad `exact`: + + ``` html + + + ``` + + Vea más ejemplos explicando la clase activa [aquí](https://jsfiddle.net/8xrk1n9f/). + +- **event** + + > 2.1.0+ + + - tipo: `string | Array` + + - valor por defecto: `'click'` + + Especifica el evento(s) que serán disparados cuando se acceda al enlace. + +### Aplicar la clase activa al elemento envolvente. + +A veces podemos querer que la clase activa se aplique al elemento envolvente en lugar de aplicarla directamente a la etiqueta ``, en ese caso, puede renderizar el elemento envolvente utilizando `` y luego una etiqueta `` dentro: + +``` html + + /foo + +``` + +En este caso, la etiqueta `` será el enlace (y obtendrá el atributo `href` correcto), pero la clase activa será aplicada al elemento envolvente `
  • `. diff --git a/docs/es/api/router-view.md b/docs/es/api/router-view.md new file mode 100644 index 000000000..d2fc38301 --- /dev/null +++ b/docs/es/api/router-view.md @@ -0,0 +1,27 @@ +# `` + +El componente `` es un componente funcional que renderiza a otro en base a la ruta seleccionada. Los componentes renderizados en `` pueden contener su propio ``, el cual renderizará componentes para rutas anidadas. + +### Propiedades + +- **name** + + - tipo: `string` + + - valor por defecto: `"default"` + + Cuando un componente `` tiene un nombre, renderizará el componente con el nombre correspondiente en la opción `components` del registro de ruta que coincida. Vea [vistas con nombre](../essentials/named-views.md) para más información. + +### Comportamiento + +Cualquier propiedad diferente a `name` será pasado al componente renderizado, de cualquier manera, la mayor parte del tiempo los datos de la ruta están contenidos dentro de los parámetros de la ruta. + +Dado que es simplemente un componente, funciona con `` y ``. Cuando utilice ambos en conjunto, asegúrese de usar `` dentro de ``: + +``` html + + + + + +``` diff --git a/docs/es/essentials/dynamic-matching.md b/docs/es/essentials/dynamic-matching.md new file mode 100644 index 000000000..710d615ea --- /dev/null +++ b/docs/es/essentials/dynamic-matching.md @@ -0,0 +1,62 @@ +# Coincidencia dinámica de rutas + +Es bastante común tener que mapear rutas con un patrón determinado al mismo componente. Por ejemplo, puede que tengamos un componente `User` el cual debería ser renderizado para todos los usuarios, pero con diferente ID. En `vue-router` podemos usar un segmento dinámico en el _path_ para lograrlo: + +``` js +const User = { + template: '
    User
    ' +} + +const router = new VueRouter({ + routes: [ + // los segmentos dinámicos comienzan con dos puntos + { path: '/user/:id', component: User } + ] +}) +``` + +Ahora, las URL como `/user/foo` y `/user/bar` mapearán a la misma ruta. + +Un segmento dinámico se representa con dos puntos `:`. Cuando se encuentra una coincidencia en la ruta, el valor del segmento dinámico se expondrá como `this.$route.params` en cada componente. Por lo tanto, podremos renderizar el ID del usuario actual modificando el template de `User`de la siguiente manera: + +``` js +const User = { + template: '
    User {{ $route.params.id }}
    ' +} +``` + +Puede consultar en el siguiente [ejemplo](http://jsfiddle.net/yyx990803/4xfa2f19/). + +Se pueden tener múltiples segmentos dinámicos en la misma ruta, y todos serán mapeados a los correspondientes campos en `$route.params`. Por ejemplo: + +| patrón | coincidencia de ruta | $route.params | +|---------|------|--------| +| /user/:username | /user/evan | `{ username: 'evan' }` | +| /user/:username/post/:post_id | /user/evan/post/123 | `{ username: 'evan', post_id: 123 }` | + +Además de `$route.params`, el objeto `$route` expone más información útil, como `$route.query` (si hay alguna _query_ en la URL), `$route.hash`, etc. Puede verificar todos los detalles en la documentación de la [API](../api/route-object.md). + +### Reaccionando a cambios en los parámetros + +Una cosa a tener en cuenta cuando se usan rutas con parámetros es que cuando el usuario navega de `/user/foo` a `/user/bar`, **la misma instancia del componente será reutilizada**. Dado que ambas rutas renderizan el mismo componente, esto es más eficiente que destruir la instancia anterior y crear una nueva. **Sin embargo, esto significa que los eventos del ciclo de vida del componentes no serán emitidos**. + +Para detectar cambios en los parámetros en el mismo componente, puede simplemente observar el objeto `$route`: + +``` js +const User = { + template: '...', + watch: { + '$route' (to, from) { + // Código que responde al cambio + } + } +} +``` + +### Patrones de coincidencia avanzados + +`vue-router` usa [path-to-regexp](https://github.com/pillarjs/path-to-regexp) como su motor de búsqueda de patrones, por lo que soporta varios patrones de coincidencia avanzados tales como segmentos dinámicos opcionales, requerimientos del tipo cero o más / uno o más, e incluso patrones _regex_ personalizados. Verifica la [documentación](https://github.com/pillarjs/path-to-regexp#parameters) para estos patrones avanzados, y [este ejemplo](https://github.com/vuejs/vue-router/blob/dev/examples/route-matching/app.js) de como usarlos con `vue-router`. + +### Prioridad en la coincidencia de patrones + +A veces la misma URL puede coinciide con múltiples rutas. E ese caso, la prioridad en la coincidencia se determina por el orden de la definición de las rutas: la primera ruta definida será la que tenga mayor prioridad. diff --git a/docs/es/essentials/getting-started.md b/docs/es/essentials/getting-started.md new file mode 100644 index 000000000..44e3096f6 --- /dev/null +++ b/docs/es/essentials/getting-started.md @@ -0,0 +1,68 @@ +# Empezando + +> Utilizaremos [ES2015](https://github.com/lukehoban/es6features) en el código de los ejemplos en esta guía. + +Crear una aplicación de una sola página con Vue.js + vue-router es muy simple. Con Vue.js, ya estamos estructurando nuestra aplicación con componentes. Cuando agregamos vue-router, todo lo que debemos hacer es mapear nuestros componentes a las rutas e informar a vue-router donde renderizarlas. Aquí hay un ejemplo básico: + +> Todos los ejemplos utilizarán la versión independiente de Vue para hacer posible el análisis de plantillas. Más detalles [aquí](http://vuejs.org/guide/installation.html#Standalone-vs-Runtime-only-Build). + +### HTML + +``` html + + + +
    +

    Hello App!

    +

    + + + + Go to Foo + Go to Bar +

    + + +
    +``` + +### JavaScript + +``` js +// 0. Si utiliza un sistema de empaquetamiento de módulos (por ejemplo, a través de vue-cli), importe Vue y VueRoutery luego ejecute Vue.use(VueRouter). + +// 1. Defina componentes de enrutamiento. +// Estos pueden ser importados desde otros archivos +const Foo = { template: '
    foo
    ' } +const Bar = { template: '
    bar
    ' } + +// 2. Defina algunas rutas +// Cada ruta debe mapear a un componente. El "componente" puede +// ser un constructor de componente creado a través de +// Vue.extend(), o simplemente un objeto de opciones de componente. +// Más tarde hablaremos acerca de las rutas anidadas. +const routes = [ + { path: '/foo', component: Foo }, + { path: '/bar', component: Bar } +] + +// 3. Cree una instancia del _router_ y pase la opción `routes` +// Puede pasar opciones adicionales aquí, +// pero mantengámoslo simple por el momento. +const router = new VueRouter({ + routes // forma corta para routes: routes +}) + +// 4. Cree y monte la instancia principal. +// Asegúrese de inyectar el _router_ con la opcion router para +// garantizar que toda la aplicación tenga acceso al mismo. +const app = new Vue({ + router +}).$mount('#app') + +// ¡Ahora la aplicación está ejecutándose! +``` + +Puede consultar este [ejemplo](http://jsfiddle.net/yyx990803/xgrjzsup/). + +Note que `` obtiene automaáticamente la clase `.router-link-active` cuando la ruta a la que apunta es accedida. Puede leer más acerca de eso en la documentación de la [API](../api/router-link.md). diff --git a/docs/es/essentials/history-mode.md b/docs/es/essentials/history-mode.md new file mode 100644 index 000000000..35d7d98ff --- /dev/null +++ b/docs/es/essentials/history-mode.md @@ -0,0 +1,60 @@ +# Modo historia HTML5 + +El modo por defecto para `vue-router` es _hash mode_ - el cual utiliza una almohadilla para similar la URL completa para que la página no sea recargada cuando la URL cambia. + +Para eliminar la almohadilla, podemos utilizar el **modo historia** del enrutador, el cual utiliza el método `history.pushState` de la API para conseguir una navegación sin recarga de página: + +``` js +const router = new VueRouter({ + mode: 'history', + routes: [...] +}) +``` + +Cuando utilice el modo historia, la URL lucirá "normal", por ejemplo: `http://oursite.com/user/id`. ¡Hermoso! + +Sin embargo, hay un problema: dado que nuestra aplicación es de una sola página del lado cliente, sin una configuración apropiada de nuestro servidor, los usuarios van a obtener errores 404 si intentan acceder directamente a `http://oursite.com/user/id` en sus navegadores. Eso es horrible. + +No hay problema: para solucionar el error, todo lo que debe hacer es agregar un redireccionamiento en su servidor. Si la URL no coincide con ningún recurso estático, debe apuntar a la misma página `index.html` donde se encuentra su aplicación. Nuevamente, ¡Hermoso! + +## Ejemplos de configuraciones de servidores + +#### Apache + +```apache + + RewriteEngine On + RewriteBase / + RewriteRule ^index\.html$ - [L] + RewriteCond %{REQUEST_FILENAME} !-f + RewriteCond %{REQUEST_FILENAME} !-d + RewriteRule . /index.html [L] + +``` + +#### nginx + +```nginx +location / { + try_files $uri $uri/ /index.html; +} +``` + +#### Node.js (Express) + +Para Node.js/Express, considere utilizar el middleware [connect-history-api-fallback](https://github.com/bripkens/connect-history-api-fallback). + +## Contras + +Hay una contra para esto: su servidor ya no reportará errores 404 dado que todas las rutas no encontradas serán redireccionadas a su archivo `index.html`. Para solucionar este problema debe implementar dentro de su aplicación Vue una ruta por defecto para mostrar una página de error 404: + +``` js +const router = new VueRouter({ + mode: 'history', + routes: [ + { path: '*', component: NotFoundComponent } + ] +}) +``` + +Otra solución, si utiliza un servidor Node.js, es utilizar el enrutador del lado del servidor para analizar las URL ingresadas y responder con un error 404 si ninguna ruta coincide. diff --git a/docs/es/essentials/named-routes.md b/docs/es/essentials/named-routes.md new file mode 100644 index 000000000..ec8e91510 --- /dev/null +++ b/docs/es/essentials/named-routes.md @@ -0,0 +1,31 @@ +# Rutas con nombre + + A veces es conveniente identificar una ruta con un nombre, especialmente cuando enlazamos a esa ruta o navegamos programáticamente. Puede darle un nombre a una ruta en las opciones de `routes` cuando se crea la instancia de Router: + +``` js +const router = new VueRouter({ + routes: [ + { + path: '/user/:userId', + name: 'user', + component: User + } + ] +}) +``` + +Para enlazar a una ruta con nombre, puede pasar un objeto a la propiedad `to` del componente `router-link`: + +``` html +User +``` + +Este es exactamente el mismo objeto utilizado programáticamente con `router.push()`: + +``` js +router.push({ name: 'user', params: { userId: 123 }}) +``` + +En ambos casos, el enrutador navegará a la ruta `/user/123`. + +Vea un ejemplo completo [aquí](https://github.com/vuejs/vue-router/blob/dev/examples/named-routes/app.js). diff --git a/docs/es/essentials/named-views.md b/docs/es/essentials/named-views.md new file mode 100644 index 000000000..7ced36501 --- /dev/null +++ b/docs/es/essentials/named-views.md @@ -0,0 +1,29 @@ +# Vistas con nombre + +A veces es necesario mostrar múltiples vistas al mismo tiempo en lugar de anidarlas, por ejemplo, cuando se crea una plantilla con una vista `sidebar` y una vista `main`. Aquí es cuando las vistas con nombre se vuelven útiles. En lugar de tener un solo _outlet_ es su vista, puede tener varios y darle a cada uno un nombre diferente. Por defecto, un `router-view` sin nombre se llamará `default`. + +``` html + + + +``` + +Una vista se renderiza utilizando un componente, por lo tanto, múltiples vistas requerirán múltiples componentes para la misma ruta. Asegúrese de usar la opción `components` (con una _s_ al final): + +``` js +const router = new VueRouter({ + routes: [ + { + path: '/', + components: { + default: Foo, + a: Bar, + b: Baz + } + } + ] +}) +``` + +Puede ver una demostración de este ejemplo +[aquí](https://jsfiddle.net/posva/6du90epg/). diff --git a/docs/es/essentials/navigation.md b/docs/es/essentials/navigation.md new file mode 100644 index 000000000..184473fd7 --- /dev/null +++ b/docs/es/essentials/navigation.md @@ -0,0 +1,69 @@ +# Navegación programática + +Además de usar `` para crear etiquetas _a_ para una navegación declarativa, podemos hacer lo mismo programáticamente usando los métodos de la instancia del enrutador. + +#### `router.push(location, onComplete?, onAbort?)` + +Para navegar a una URL diferente, utilice `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étpdp es el que se llama internamente cuando se hace clic en un ``, por lo que`` es el equivalente a ejecutar `router.push(...)`. + +| Declarativo | Programático | +|-------------|--------------| +| `` | `router.push(...)` | + +El argumento puede ser una cadena de texto o un objeto descriptor. Por ejemplo: + +``` js +// cadena de texto literal +router.push('home') + +// Objeto +router.push({ path: 'home' }) + +// Ruta con nombre +router.push({ name: 'user', params: { userId: 123 }}) + +// Con _query_, con lo que se obtiene /register?plan=private +router.push({ path: 'register', query: { plan: 'private' }}) +``` + +A partir de la version 2.2.0+, puede opcionalmente proveer _callbacks_ `onComplete` y `onAbort` a `router.push` o `router.replace` como segundo y tercer argumento. Estas _callbacks_ serán ejecutadas cuando la navegación sea completada exitosamente (luego que todos los _hooks_ asíncronos sean resueltos), o abortada (navegando a la misma ruta, o a una ruta diferente antes que la navegación actual haya finalizado), respectivamente. + +#### `router.replace(location, onComplete?, onAbort?)` + +Actúa como `router.push`, la única diferencia es que navega sin agregar una nueva entrada al historial, como su nombre sugiere - reemplaza la entrada actual. + +| Declarativo | Programático | +|-------------|--------------| +| `` | `router.replace(...)` | + + +#### `router.go(n)` + +Este método toma un entero como parámetro que indica cuantos pasos avanzar o retroceder en el historial, similar a `window.history.go(n)`. + +Ejemplos + +``` js +// Ir hacia adelante un paso, similar a history.forward() +router.go(1) + +// Ir hacia atrás un paso, similar a history.back() +router.go(-1) + +// Ir 3 pasos hacia adelante +router.go(3) + +// Fallá silenciosamente si no existe esa cantidad de registros en el historial +router.go(-100) +router.go(100) +``` + +#### Manipulación del historial + +Seguramente notó que `router.push`, `router.replace` y `router.go` son contra partes de [`window.history.pushState`, `window.history.replaceState` y `window.history.go`](https://developer.mozilla.org/en-US/docs/Web/API/History), y que imitan a las API de `window.history`. + +Por lo tanto, si está familiarizado con las [API del historial del navegador](https://developer.mozilla.org/en-US/docs/Web/API/History_API), manipularlo será muy sencillo con vue-router. + +Vale la pena mencionar que los métodos de navegacion de vue-router (`push`, `replace`, `go`) funcionan consistentemente en todos los modos de trabajo del enrutador (`history`, `hash` y `abstract`). diff --git a/docs/es/essentials/nested-routes.md b/docs/es/essentials/nested-routes.md new file mode 100644 index 000000000..03e9f8380 --- /dev/null +++ b/docs/es/essentials/nested-routes.md @@ -0,0 +1,99 @@ +# Rutas anidadas + +Las interfaces de usuario (UI por sus siglas en inglés) de aplicaciones reales normalmente están compuestas por componentes que están anidados varios niveles. Es también muy común que los segmentos de una URL correspondan a cierta estructura de componentes anidados, por ejemplo: + +``` +/user/foo/profile /user/foo/posts ++------------------+ +-----------------+ +| User | | User | +| +--------------+ | | +-------------+ | +| | Profile | | +------------> | | Posts | | +| | | | | | | | +| +--------------+ | | +-------------+ | ++------------------+ +-----------------+ +``` + +Con `vue-router` es muy simple expresar esta relación usando configuraciones de rutas anidadas. + +Dada la aplicación que creamos en el capítulo anterior: + +``` html +
    + +
    +``` + +``` js +const User = { + template: '
    User {{ $route.params.id }}
    ' +} + +const router = new VueRouter({ + routes: [ + { path: '/user/:id', component: User } + ] +}) +``` + +Aquí, `` es un _outlet_ de nivel superior. Renderiza el componente que coincida con una ruta de nivel superior. Así, un componente renderizado puede contener su propio `` anidado. Por ejemplo, si agregamos uno dentro de la plantilla del componente `User`: + +``` js +const User = { + template: ` +
    +

    User {{ $route.params.id }}

    + +
    + ` +} +``` + +Para renderizar componentes dentro de este _outlet_ anidado, necesitamos usar la opción `children` en la configuración del constructor de `VueRouter`: + +``` js +const router = new VueRouter({ + routes: [ + { path: '/user/:id', component: User, + children: [ + { + // UserProfile será renderizado en el dentro de User + // cuando /user/:id/profile coincida + path: 'profile', + component: UserProfile + }, + { + // UserPosts será renderizado en el dentro de User + // cuando /user/:id/posts coincida + path: 'posts', + component: UserPosts + } + ] + } + ] +}) +``` + +**Note que las rutas anidadas que empiecen con `/` serán tratadas como absolutas. Esto permite aprovechar el anidamiento de componentes sin tener que usar URL anidadas.** + +Como puede ver, la opción `children` es simplemente otro arreglo de objetos de configuración de rutas, como `routes`. Por lo tanto, puede anidar tantas vistas como necesite. + +En este punto, con la configuración anterior, cuando visite `/user/foo`, nada será renderizado dentro de, _outlet_ de `User`, porque ninguna sub ruta coincidió. Tal vez quiera renderizar algo ahí. En ese caso, puede proveer una sub ruta vacía: + +``` js +const router = new VueRouter({ + routes: [ + { + path: '/user/:id', component: User, + children: [ + // UserHome será renderizado en el dentro de User + // cuando /user/:id coincida + { path: '', component: UserHome }, + + // ...otras sub rutas + ] + } + ] +}) +``` + +Puede encontrar una demostración de este ejemplo [aquí](http://jsfiddle.net/yyx990803/L7hscd8h/). diff --git a/docs/es/essentials/passing-props.md b/docs/es/essentials/passing-props.md new file mode 100644 index 000000000..24e8694c3 --- /dev/null +++ b/docs/es/essentials/passing-props.md @@ -0,0 +1,72 @@ +# Pasando Props a componentes de ruteo + +Usar `$route` en su componente crea un estrecho acoplamiento con la ruta, lo cual limita la flexibilidad del componente dado que solo puede utilizarse en ciertas URL. + +Para desacoplar el componente del enrutador utilice _props_: + +**❌ Acoplado a$route** + +``` js +const User = { + template: '
    User {{ $route.params.id }}
    ' +} +const router = new VueRouter({ + routes: [ + { path: '/user/:id', component: User } + ] +}) +``` + +**👍 Desacoplado con props** + +``` js +const User = { + props: ['id'], + template: '
    User {{ id }}
    ' +} +const router = new VueRouter({ + routes: [ + { path: '/user/:id', component: User, props: true } + ] +}) +``` + +Esto le permite utilizar el componente en cualquier lugar, lo cual hace al mismo reutilizable y más simple de testear. + +### Modo booleano + +Cuando _props_ tiene asignado el valor true, route.params serán asignados como las _props_ del componente. + +### Modo objeto + +Cuando _props_ es un objeto, este será asignado tal cual como las _props_ del componente. +Úitl para cuando las _props_ son estáticas. + +``` js +const router = new VueRouter({ + routes: [ + { path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } } + ] +}) +``` + +### Modo función + +Puede crear una función que retorne _props_. +Esto le permite convertir los parámetros a otro tipo, combinar valores estáticos con valores basados en rutas, etc. + +``` js +const router = new VueRouter({ + routes: [ + { path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q }) } + ] +}) +``` + +La URL: `/search?q=vue` pasaría `{query: "vue"}` como _props_ al componente SearchUser. + +Intente crear funciones _props_ sin estado, dado que solo se evalúan cuando ocurren cambios de ruta. +Use un componente envolvente si necesita estado para definir las _props_, de esa manera Vue puede reaccionar a cambios de estado. + + +Para un uso avanzado, vea el siguiente [ejemplo](https://github.com/vuejs/vue-router/blob/dev/examples/route-props/app.js). diff --git a/docs/es/essentials/redirect-and-alias.md b/docs/es/essentials/redirect-and-alias.md new file mode 100644 index 000000000..a657df796 --- /dev/null +++ b/docs/es/essentials/redirect-and-alias.md @@ -0,0 +1,58 @@ +# Redireccionamiento y alias + +### Redireccionamiento + +El redireccionamiento se realiza en la configuración de `routes`. Para redireccionar de `/a` a `/b`: + +``` js +const router = new VueRouter({ + routes: [ + { path: '/a', redirect: '/b' } + ] +}) +``` + +EL redireccionamiento también puede apuntar a una ruta con nombre: + +``` js +const router = new VueRouter({ + routes: [ + { path: '/a', redirect: { name: 'foo' }} + ] +}) +``` + +O incluso puede utilizar una función para un redireccionamiento dinámico: + +``` js +const router = new VueRouter({ + routes: [ + { path: '/a', redirect: to => { + // la función recibe la ruta destino como argumento + // retorne aquí la ruta de redirección. + }} + ] +}) +``` + +Para otros usos avanzados, vea el siguiente [ejemplo](https://github.com/vuejs/vue-router/blob/dev/examples/redirect/app.js). + +### Alias + +Una redirección significa que el usuario visita `/a`, y la URL será reemplazada por `/b`, para luego ejecutar el código correspondiente a `/b`. Pero, ¿qué es un alias? + +**Un alias de `/a` como `/b` significa que cuando el usuario visita `/b`, la URL se mantiene como `/b`, pero el código ejecutado corresponderá al mismo que si el usuario visitase `/a`.** + +Lo anterior puede ser expresado en la configuracion de enrutamiento como: + +``` js +const router = new VueRouter({ + routes: [ + { path: '/a', component: A, alias: '/b' } + ] +}) +``` + +Un alias le da la libertad de mapear una estructura de _UI_ a una URL arbitraria, en lugar de estar restringido por la estructura anidada de la configuración. + +Para otros usos avanzados, vea el siguiente [ejemplo](https://github.com/vuejs/vue-router/blob/dev/examples/route-alias/app.js). diff --git a/docs/es/installation.md b/docs/es/installation.md new file mode 100644 index 000000000..0541f8498 --- /dev/null +++ b/docs/es/installation.md @@ -0,0 +1,44 @@ +# Instalación + +### Descarga directa / CDN + +[https://unpkg.com/vue-router/dist/vue-router.js](https://unpkg.com/vue-router/dist/vue-router.js) + + +[Unpkg.com](https://unpkg.com) provee enlaces a CDN basadas en NPM. El enlace anterior siempre apuntará a la última versión en NPM. También puede usar una versión/etiqueta específica a través de URLs como`https://unpkg.com/vue-router@2.0.0/dist/vue-router.js`. + + +Incluya `vue-router` luego de Vue y se instalará automáticamente: + +``` html + + +``` + +### NPM + +``` bash +npm install vue-router +``` + +Cuando lo use con un sistema de empaquetamiento de módulos, debe instalarlo explícitamente a través de `Vue.use()`: + +``` js +import Vue from 'vue' +import VueRouter from 'vue-router' + +Vue.use(VueRouter) +``` + +No necesita hacer esto cuando utilice etiquetas _script_ globales. + +### Versión de desarrollo + +Deberá clonar el repositorio directamente desde GitHub y construir `vue-router` usted mismo si quiere utilizar la última versión de desarrollo. + +``` bash +git clone https://github.com/vuejs/vue-router.git node_modules/vue-router +cd node_modules/vue-router +npm install +npm run build +``` From a75bfbed4b7a09c61ee3ddd8a2c71e4ca8426cec Mon Sep 17 00:00:00 2001 From: zeratulmdq Date: Fri, 10 Feb 2017 17:01:25 -0300 Subject: [PATCH 2/7] Minor fixes and grammar check --- docs/es/SUMMARY.md | 4 ++-- docs/es/advanced/data-fetching.md | 18 +++++++++--------- docs/es/advanced/lazy-loading.md | 2 +- docs/es/advanced/meta.md | 4 ++-- docs/es/advanced/navigation-guards.md | 16 ++++++++-------- docs/es/advanced/scroll-behavior.md | 14 +++++++------- docs/es/advanced/transitions.md | 8 ++++---- docs/es/api/component-injections.md | 2 +- docs/es/api/options.md | 6 +++--- docs/es/api/route-object.md | 4 ++-- docs/es/api/router-instance.md | 4 ++-- docs/es/api/router-link.md | 14 +++++++------- docs/es/api/router-view.md | 4 ++-- docs/es/essentials/dynamic-matching.md | 8 ++++---- docs/es/essentials/getting-started.md | 24 ++++++++++++------------ docs/es/essentials/history-mode.md | 14 +++++++------- docs/es/essentials/named-routes.md | 6 +++--- docs/es/essentials/named-views.md | 7 +++---- docs/es/essentials/navigation.md | 12 ++++++------ docs/es/essentials/nested-routes.md | 12 ++++++------ docs/es/essentials/passing-props.md | 18 +++++++++--------- docs/es/essentials/redirect-and-alias.md | 10 +++++----- docs/es/installation.md | 10 +++++----- 23 files changed, 110 insertions(+), 111 deletions(-) diff --git a/docs/es/SUMMARY.md b/docs/es/SUMMARY.md index c652aa9a3..8c710ea18 100644 --- a/docs/es/SUMMARY.md +++ b/docs/es/SUMMARY.md @@ -6,8 +6,8 @@ - [Instalación](installation.md) - Esenciales - - [Empezando](essentials/getting-started.md) - - [Coincidencia diámica de rutas](essentials/dynamic-matching.md) + - [Primeros pasos](essentials/getting-started.md) + - [Coincidencia dinámica de rutas](essentials/dynamic-matching.md) - [Rutas anidadas](essentials/nested-routes.md) - [Navegación programática](essentials/navigation.md) - [Rutas con nombre](essentials/named-routes.md) diff --git a/docs/es/advanced/data-fetching.md b/docs/es/advanced/data-fetching.md index b5cf39b09..d5eae9a36 100644 --- a/docs/es/advanced/data-fetching.md +++ b/docs/es/advanced/data-fetching.md @@ -1,12 +1,12 @@ # Obtención de datos -Puede que necesite obtener datos desde el servidor cuando una ruta es activada. Por ejemplo, antes de renderizar un perfil de usuario, puede obtener la información de ese usuario desde el servidor. Podemos lograr esto de dos maneras diferentes: +Puede que necesites obtener datos desde el servidor cuando una ruta es activada. Por ejemplo, antes de renderizar un perfil de usuario, puedes obtener la información de ese usuario desde el servidor. Podemos lograr esto de dos maneras diferentes: -- **Obtener la información después de la navegación**: realice la navegación primero y luego obtenga los datos en el _hook_ del ciclo de vida del componente entrante. Muestre algún tipo de indicador de carga mientras espera llegada de la información. +- **Obtener la información después de la navegación**: realiza la navegación primero y luego obtén los datos en un _hook_ del ciclo de vida del componente entrante. Muestra algún tipo de indicador de carga mientras se espera la llegada de la información. -- **Obtener la información antes de la navegación**: Obtenga los datos antes de la navegación en el guardia de entrada de la ruta, y realice la navegación luego de haberla obtenido. +- **Obtener la información antes de la navegación**: Obtén los datos antes de la navegación en el guardia de entrada de la ruta, y realiza la navegación luego de haberla obtenido. -Técnicamente, ambas opciones son válidas - depende de la experiencia de usuario a la que apunte. +Técnicamente, ambas opciones son válidas - depende de la experiencia de usuario a la que apuntes. ## Obtener la información después de la navegación @@ -43,19 +43,19 @@ export default { } }, created () { - // obtener los datos cuando la vista es creada y _data_ ya + // obtén los datos cuando la vista es creada y _data_ ya // está siendo observada this.fetchData() }, watch: { - // ejecutar nuevamente el método si la ruta cambia + // ejecuta nuevamente el método si la ruta cambia '$route': 'fetchData' }, methods: { fetchData () { this.error = this.post = null this.loading = true - // reemplace getPost con lo que corresponda + // reemplaza getPost con lo que corresponda getPost(this.$route.params.id, (err, post) => { this.loading = false if (err) { @@ -71,7 +71,7 @@ export default { ## Obtener la información antes de la navegación -Con este enfoque, obtenemos la información antes de navegar a la nueva ruta. Podemos obtener los datos en el guardia `beforeRouteEnter` en el componente entrante, y solo ejecutar `next` cuando se haya completado: +Con este enfoque, obtenemos la información antes de navegar a la nueva ruta. Podemos obtener los datos en el guardia `beforeRouteEnter` del componente entrante, y solo ejecutar `next` cuando se haya completado: ``` js export default { @@ -84,7 +84,7 @@ export default { beforeRouteEnter (to, from, next) { getPost(to.params.id, (err, post) => { if (err) { - // mostrar algún mensaje global de error + // muestra algún mensaje global de error next(false) } else { next(vm => { diff --git a/docs/es/advanced/lazy-loading.md b/docs/es/advanced/lazy-loading.md index 9cb578564..ec9bf6487 100644 --- a/docs/es/advanced/lazy-loading.md +++ b/docs/es/advanced/lazy-loading.md @@ -21,7 +21,7 @@ Hay una alternativa a la sintaxis de división de código utilizando _require_ c const Foo = resolve => require(['./Foo.vue'], resolve) ``` -Nada debe cambiarse en la configuración del enrutador, simplemente utilice `Foo` normalmente: +Nada debe cambiarse en la configuración del enrutador, simplemente utiliza `Foo` normalmente: ``` js const router = new VueRouter({ diff --git a/docs/es/advanced/meta.md b/docs/es/advanced/meta.md index d2a00c956..be4a72297 100644 --- a/docs/es/advanced/meta.md +++ b/docs/es/advanced/meta.md @@ -1,6 +1,6 @@ # Campos Meta en las rutas -Puede incluir un campo `meta` cuando defina una ruta: +Puedes incluir un campo `meta` cuando definas una ruta: ``` js const router = new VueRouter({ @@ -45,7 +45,7 @@ router.beforeEach((to, from, next) => { next() } } else { - next() // ¡Asegúrese de ejecutar next siempre! + next() // ¡Asegúrate de ejecutar next siempre! } }) ``` diff --git a/docs/es/advanced/navigation-guards.md b/docs/es/advanced/navigation-guards.md index dddeb44c0..5b00edabc 100644 --- a/docs/es/advanced/navigation-guards.md +++ b/docs/es/advanced/navigation-guards.md @@ -2,11 +2,11 @@ Como el nombre sugiere, los guardias de navegación provistas por `vue-router` son básicamente utilizadas para proteger rutas de navegación ya sea redireccionando o cancelandolas. Hay varias maneras de engancharse en el proceso de navegación de rutas: globalmente, por ruta o dentro de los componentes. -Recuerde **Los cambios en los parámetros o las _queries_ no harán que se ejecuten los guardias de navegación**. Simplemente [observe el objeto `$route`](../essentials/dynamic-matching.md#reacting-to-params-changes) para obtener reactividad 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 obtener reactividad frente a esos cambios. ### Guardias globales -Puede registrar guardias _before_ globales usando `router.beforeEach`: +Puedes registrar guardias _before_ globales usando `router.beforeEach`: ``` js const router = new VueRouter({ ... }) @@ -34,7 +34,7 @@ Cada función guardia recibe tres argumentos: **Asegúrese de llamar siempre a la función `next`, de otra manera el _hook_ nunca será resuelto.** -También puede registrar _hooks after_ globales. 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 after_ globales. 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) => { @@ -44,7 +44,7 @@ router.afterEach((to, from) => { ### Guardias por ruta -Puede definier guardias `beforeEnter` directamente en el objeto de configuración de una ruta: +Puedes definir guardias `beforeEnter` directamente en el objeto de configuración de una ruta: ``` js const router = new VueRouter({ @@ -64,7 +64,7 @@ Estos guardias tienen exactamente la misma firma que los guardias _before_ globa ### Guardias en componentes -Por último, puede directamente definir guardias de navegación dentro de los componentes de ruta (los que son pasados a la configuración del enrutador) con las siguientes opciones: +Por último, puedes directamente definir guardias de navegación dentro de los componentes de ruta (los que son pasados a la configuración del enrutador) con las siguientes opciones: - `beforeRouteEnter` - `beforeRouteUpdate` (agregado en la versión 2.2) @@ -96,14 +96,14 @@ const Foo = { El guardia `beforeRouteEnter` **NO** tiene acceso a `this`, porque es ejecutado antes que la navegación sea confirmada, por lo tanto el componente destino todavía no ha sido creado. -Sin embargo, puede acceder a la instancia pasando una _callback_ a `next`. La _callback_ se ejecutará cuando la navegación sea confirmada, y la instancia del componente será pasada como argumento: +Sin embargo, puedes acceder a la instancia pasando una _callback_ a `next`. La _callback_ se ejecutará cuando la navegación sea confirmada, y la instancia del componente será pasada como argumento: ``` js beforeRouteEnter (to, from, next) { next(vm => { - // acceda a la instancia del componente a través de `vm` + // accede a la instancia del componente a través de `vm` }) } ``` -Puede acceder directamente a `this` dentro de `beforeRouteLeave`. El guardia _leave_ se usa normalmente para prevenir al usuario cuando intenta abandonar la ruta accidentalmente sin guardar cambios. La navegación puede ser cancelada ejecutando `next(false)`. +Puedes acceder directamente a `this` dentro de `beforeRouteLeave`. El guardia _leave_ se usa normalmente para prevenir al usuario cuando intenta abandonar la ruta accidentalmente sin guardar cambios. La navegación puede ser cancelada ejecutando `next(false)`. diff --git a/docs/es/advanced/scroll-behavior.md b/docs/es/advanced/scroll-behavior.md index dc1452a33..cdf033cdd 100644 --- a/docs/es/advanced/scroll-behavior.md +++ b/docs/es/advanced/scroll-behavior.md @@ -1,10 +1,10 @@ # Comportamiento del desplazamiento -Cuando se utiliza enturamiento del lado cliente, podemos querer desplazarnos hacia el inicio de la página cuando naveguemos a una nueva ruta, o preservar la posicón actual, tal cual lo hace una recarga de la página. `vue-router` le permite lograr esto e incluso más, le permite personalizar completamente el comportamiento del desplazamiento en las navegaciones. +Cuando se utiliza enrutamiento del lado cliente, podemos querer desplazarnos hacia el tope de la página cuando naveguemos a una nueva ruta, o preservar la posicón actual, tal cual lo hace una recarga de la página. `vue-router` te permite lograr esto e incluso más: permite personalizar completamente el comportamiento del desplazamiento en las navegaciones. **Nota: esta característica solo funciona en el modo historial de HTML5.** -Cuando cree una instancia del enrutador, puede incluir la función `scrollBehavior`: +Cuando crees una instancia del enrutador, puedes incluir la función `scrollBehavior`: ``` js const router = new VueRouter({ @@ -15,9 +15,9 @@ const router = new VueRouter({ }) ``` -La función `scrollBehavior` recibe los objetos de ruta `to` y `from`. El tercer argumento, `savedPosition`, solo está disponible si estamos en una navegación `popstate` (cuando se utilizan los botones _atras_ o _adelante_ en el navegador). +La función `scrollBehavior` recibe los objetos de ruta `to` y `from`. El tercer parámetro, `savedPosition`, solo está disponible si estamos en una navegación `popstate` (cuando se utilizan los botones _atras_ o _adelante_ en el navegador). -La función puede devolver un objeto de posición de desplazamiento. EL objeto puede ser de la forma: +La función puede devolver un objeto de posición de desplazamiento. El objeto puede ser de la forma: - `{ x: number, y: number }` - `{ selector: string }` @@ -32,7 +32,7 @@ scrollBehavior (to, from, savedPosition) { } ``` -Esto hará que la página se desplace hacia el inicio para todas las navegaciones a la ruta. +Esto hará que la página se desplace hacia el tope para todas las navegaciones a la ruta. Devolver `savedPosition` hará que el comportamiento cuando se utilicen los botones _atras_ o _adelante_ sea el nativo: @@ -46,7 +46,7 @@ scrollBehavior (to, from, savedPosition) { } ``` -Si desea simular el desplazamiento a anclas: +Si deseas simular el desplazamiento a anclas: ``` js scrollBehavior (to, from, savedPosition) { @@ -58,4 +58,4 @@ scrollBehavior (to, from, savedPosition) { } ``` -También podemos utilizar [campos meta](meta.md) para implementar un control de desplazamientoto fino. Vea un ejemplo completo [aquí](https://github.com/vuejs/vue-router/blob/dev/examples/scroll-behavior/app.js). +También podemos utilizar [campos meta](meta.md) para implementar un control de desplazamientoto fino. Un ejemplo completo [aquí](https://github.com/vuejs/vue-router/blob/dev/examples/scroll-behavior/app.js). diff --git a/docs/es/advanced/transitions.md b/docs/es/advanced/transitions.md index b31f6b9fd..17af3ff45 100644 --- a/docs/es/advanced/transitions.md +++ b/docs/es/advanced/transitions.md @@ -12,7 +12,7 @@ Dado que `` es esencialmente un componente dinámico, podemos aplic ### Transiciones por ruta -El ejemplo anterior aplicará la misma transición a todas las rutas. Si desea que cada componente de ruta tenga diferentes transiciones, puede utilizar `` con diferentes nombres dentro de cada componente de ruta: +El ejemplo anterior aplicará la misma transición a todas las rutas. Si deseas que cada componente de ruta tenga diferentes transiciones, puedes utilizar `` con diferentes nombres dentro de cada componente de ruta: ``` js const Foo = { @@ -37,7 +37,7 @@ const Bar = { También es posible determinar dinámicamente la transición a utilizar basado en las relaciones entre la ruta destino y la ruta actual: ``` html - + @@ -45,7 +45,7 @@ También es posible determinar dinámicamente la transición a utilizar basado e ``` js // luego, en el componente padre, -// observe $route para determinar que transición utilizar +// observa $route para determinar que transición utilizar watch: { '$route' (to, from) { const toDepth = to.path.split('/').length @@ -55,4 +55,4 @@ watch: { } ``` -Vea un ejemplo completo [aquí](https://github.com/vuejs/vue-router/blob/dev/examples/transitions/app.js). +Tienes un ejemplo completo [aquí](https://github.com/vuejs/vue-router/blob/dev/examples/transitions/app.js). diff --git a/docs/es/api/component-injections.md b/docs/es/api/component-injections.md index f33750156..b77a6d0c9 100644 --- a/docs/es/api/component-injections.md +++ b/docs/es/api/component-injections.md @@ -17,4 +17,4 @@ Estas propiedades son inyectadas dentro de cada componente hijo pasando la insta - **beforeRouteEnter** - **beforeRouteLeave** - Vea [Guardias en componentes](../advanced/navigation-guards.md#incomponent-guards). + 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 3f5a08e81..8c5637741 100644 --- a/docs/es/api/options.md +++ b/docs/es/api/options.md @@ -33,7 +33,7 @@ - `hash`: utiliza el _hash_ en la URL para el enrutamiento. Funciona en todos los navegadores que soportan Vue, incluidos aquellos que no soportan la API de historial de HTML5 . - - `history`: requiere la API de historial de HTML y configuración del lado servidor. Vea [Modo historial HTML5](../essentials/history-mode.md). + - `history`: requiere la API de historial de HTML y configuración del lado servidor. [Modo historial HTML5](../essentials/history-mode.md). - `abstract`: funciona en todos los ambientes de JavaScript, por ejemplo, del lado servidor con Node.js. **Se forzará este modo de trabajo en el enrutador si no se detecta la API de navegador.** @@ -51,7 +51,7 @@ - valor por defecto: `"router-link-active"` - Configura globalmente la clase activa por defecto de ``. Vea también [router-link](router-link.md). + Configura globalmente la clase activa por defecto de ``. Más información en [router-link](router-link.md). ### scrollBehavior @@ -67,4 +67,4 @@ ) => { x: number, y: number } | { selector: string } | ?{} ``` - Para más detalles vea [Comportamiento del desplazamiento](../advanced/scroll-behavior.md). + Para más detalles, [comportamiento del desplazamiento](../advanced/scroll-behavior.md). diff --git a/docs/es/api/route-object.md b/docs/es/api/route-object.md index 4160e0611..a87de76a0 100644 --- a/docs/es/api/route-object.md +++ b/docs/es/api/route-object.md @@ -66,7 +66,7 @@ El objeto de ruta puede encontrarse en diferentes lugares. - tipo: `Array` - Un arreglo que contiene **registro de ruta** para todos los segmentos anidados de la ruta actual. Los registros de ruta son copias de los objetos en el arreglo de configuración `routes` (y en los arreglos `children`): + Un arreglo que contiene **registros de ruta** para todos los segmentos anidados de la ruta actual. Los registros de ruta son copias de los objetos en el arreglo de configuración `routes` (y en los arreglos `children`): ``` js const router = new VueRouter({ @@ -86,4 +86,4 @@ El objeto de ruta puede encontrarse en diferentes lugares. - **$route.name** - El nombre de la ruta acutal, si tiene. (Vea [Rutas con nombre](../essentials/named-routes.md)) + El nombre de la ruta acutal, si tiene. (Más información en [rutas con nombre](../essentials/named-routes.md)) diff --git a/docs/es/api/router-instance.md b/docs/es/api/router-instance.md index 62c549390..abd9aca70 100644 --- a/docs/es/api/router-instance.md +++ b/docs/es/api/router-instance.md @@ -25,7 +25,7 @@ - **router.beforeEach(guard)** - **router.afterEach(hook)** - Agrega guardias de navegación globales. Vea [Guardias de navegación](../advanced/navigation-guards.md). + Agrega guardias de navegación globales. Info: [guardias de navegación](../advanced/navigation-guards.md). - **router.push(location, onComplete?, onAbort?)** @@ -34,7 +34,7 @@ - **router.back()** - **router.forward()** - Navega programáticamente a una nueva URL. Vea [navegación programática](../essentials/navigation.md). + Navega programáticamente a una nueva URL. Info: [navegación programática](../essentials/navigation.md). - **router.getMatchedComponents(location?)** diff --git a/docs/es/api/router-link.md b/docs/es/api/router-link.md index 7abb3be56..421938804 100644 --- a/docs/es/api/router-link.md +++ b/docs/es/api/router-link.md @@ -4,11 +4,11 @@ Es preferible utilizar `` en lugar de escribir directamente `
    ` por las siguientes razones: -- Funciona de la misma manera tanto en el modo _hash_ como en el modo historial de HTML5, por lo que si decide intercambiar modos, o cuando el router utiliza el modo _hash_ en IE9, no deberá cambiar nada. +- Funciona de la misma manera tanto en el modo _hash_ como en el modo historial de HTML5, por lo que si decides intercambiar modos, o cuando el router utiliza el modo _hash_ en IE9, no deberás cambiar nada. - En el modo historial de HTML5, `router-link` interceptará el evento _click_ para que el navegador no intente recargar la página. -- Cuando este utilizando la opción `base` en el modo historial de HTML5, no necesita incluirla en la URL de la propiedad `to`. +- Cuando estés utilizando la opción `base` en el modo historial de HTML5, no necesitas incluirla en la URL de la propiedad `to`. ### Propiedades @@ -72,7 +72,7 @@ Es preferible utilizar `` en lugar de escribir directamente `` se renderice como otra etiqueta, por ejemplo `
  • `. Puede utilizar la propiedad `tag` para especificar que etiqueta renderizar, y seguirá escuchando eventos _click_ para la navegación. + A veces puede que quieras que `` se renderice como otra etiqueta, por ejemplo `
  • `. Puedes utilizar la propiedad `tag` para especificar que etiqueta renderizar, y seguirá escuchando eventos _click_ para la navegación. ``` html foo @@ -86,7 +86,7 @@ Es preferible utilizar `` en lugar de escribir directamente `` en lugar de escribir directamente `` obtendrá la clase CSS mientras la ruta actual comience con `/a/` o sea `/a`. - Una consecuencia de esto es que `` ¡permanecerá activa para todas las rutas! Para forzar una coincidencia exacta, utilice la propiedad `exact`: + Una consecuencia de esto es que `` ¡permanecerá activa para todas las rutas! Para forzar una coincidencia exacta, utiliza la propiedad `exact`: ``` html ``` - Vea más ejemplos explicando la clase activa [aquí](https://jsfiddle.net/8xrk1n9f/). + Más ejemplos explicando la clase activa [aquí](https://jsfiddle.net/8xrk1n9f/). - **event** @@ -117,7 +117,7 @@ Es preferible utilizar `` en lugar de escribir directamente ``, en ese caso, puede renderizar el elemento envolvente utilizando `` y luego una etiqueta `` dentro: +A veces podemos querer 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: ``` html diff --git a/docs/es/api/router-view.md b/docs/es/api/router-view.md index d2fc38301..726057316 100644 --- a/docs/es/api/router-view.md +++ b/docs/es/api/router-view.md @@ -10,13 +10,13 @@ El componente `` es un componente funcional que renderiza a otro en - valor por defecto: `"default"` - Cuando un componente `` tiene un nombre, renderizará el componente con el nombre correspondiente en la opción `components` del registro de ruta que coincida. Vea [vistas con nombre](../essentials/named-views.md) para más información. + Cuando un componente `` tiene un nombre, renderizará el componente con el nombre correspondiente en la opción `components` del registro de ruta que coincida. Accede a [vistas con nombre](../essentials/named-views.md) para más información. ### Comportamiento Cualquier propiedad diferente a `name` será pasado al componente renderizado, de cualquier manera, la mayor parte del tiempo los datos de la ruta están contenidos dentro de los parámetros de la ruta. -Dado que es simplemente un componente, funciona con `` y ``. Cuando utilice ambos en conjunto, asegúrese de usar `` dentro de ``: +Dado que es simplemente un componente, funciona con `` y ``. Cuando utilices ambos en conjunto, asegúrate de usar `` dentro de ``: ``` html diff --git a/docs/es/essentials/dynamic-matching.md b/docs/es/essentials/dynamic-matching.md index 710d615ea..c3c7eec96 100644 --- a/docs/es/essentials/dynamic-matching.md +++ b/docs/es/essentials/dynamic-matching.md @@ -25,7 +25,7 @@ const User = { } ``` -Puede consultar en el siguiente [ejemplo](http://jsfiddle.net/yyx990803/4xfa2f19/). +Puedes consultar el siguiente [ejemplo](http://jsfiddle.net/yyx990803/4xfa2f19/). Se pueden tener múltiples segmentos dinámicos en la misma ruta, y todos serán mapeados a los correspondientes campos en `$route.params`. Por ejemplo: @@ -34,13 +34,13 @@ Se pueden tener múltiples segmentos dinámicos en la misma ruta, y todos serán | /user/:username | /user/evan | `{ username: 'evan' }` | | /user/:username/post/:post_id | /user/evan/post/123 | `{ username: 'evan', post_id: 123 }` | -Además de `$route.params`, el objeto `$route` expone más información útil, como `$route.query` (si hay alguna _query_ en la URL), `$route.hash`, etc. Puede verificar todos los detalles en la documentación de la [API](../api/route-object.md). +Además de `$route.params`, el objeto `$route` expone más información útil, como `$route.query` (si hay alguna _query_ en la URL), `$route.hash`, etc. Puedes verificar todos los detalles en la documentación de la [API](../api/route-object.md). ### Reaccionando a cambios en los parámetros Una cosa a tener en cuenta cuando se usan rutas con parámetros es que cuando el usuario navega de `/user/foo` a `/user/bar`, **la misma instancia del componente será reutilizada**. Dado que ambas rutas renderizan el mismo componente, esto es más eficiente que destruir la instancia anterior y crear una nueva. **Sin embargo, esto significa que los eventos del ciclo de vida del componentes no serán emitidos**. -Para detectar cambios en los parámetros en el mismo componente, puede simplemente observar el objeto `$route`: +Para detectar cambios en los parámetros en el mismo componente, puedes observar el objeto `$route`: ``` js const User = { @@ -59,4 +59,4 @@ const User = { ### Prioridad en la coincidencia de patrones -A veces la misma URL puede coinciide con múltiples rutas. E ese caso, la prioridad en la coincidencia se determina por el orden de la definición de las rutas: la primera ruta definida será la que tenga mayor prioridad. +A veces la misma URL puede coinciide con múltiples rutas. En ese caso, la prioridad en la coincidencia se determina por el orden de la definición de las rutas: la primera ruta definida será la que tenga mayor prioridad. diff --git a/docs/es/essentials/getting-started.md b/docs/es/essentials/getting-started.md index 44e3096f6..89f43ad9a 100644 --- a/docs/es/essentials/getting-started.md +++ b/docs/es/essentials/getting-started.md @@ -1,4 +1,4 @@ -# Empezando +# Primeros pasos > Utilizaremos [ES2015](https://github.com/lukehoban/es6features) en el código de los ejemplos en esta guía. @@ -15,8 +15,8 @@ Crear una aplicación de una sola página con Vue.js + vue-router es muy simple.

    Hello App!

    - - + + Go to Foo Go to Bar @@ -29,14 +29,14 @@ Crear una aplicación de una sola página con Vue.js + vue-router es muy simple. ### JavaScript ``` js -// 0. Si utiliza un sistema de empaquetamiento de módulos (por ejemplo, a través de vue-cli), importe Vue y VueRoutery luego ejecute Vue.use(VueRouter). +// 0. Si utilizas un sistema de empaquetamiento de módulos (por ejemplo, a través de vue-cli), importa Vue y VueRouter y luego ejecuta Vue.use(VueRouter). -// 1. Defina componentes de enrutamiento. +// 1. Define componentes de enrutamiento. // Estos pueden ser importados desde otros archivos const Foo = { template: '

    foo
    ' } const Bar = { template: '
    bar
    ' } -// 2. Defina algunas rutas +// 2. Define algunas rutas // Cada ruta debe mapear a un componente. El "componente" puede // ser un constructor de componente creado a través de // Vue.extend(), o simplemente un objeto de opciones de componente. @@ -46,15 +46,15 @@ const routes = [ { path: '/bar', component: Bar } ] -// 3. Cree una instancia del _router_ y pase la opción `routes` -// Puede pasar opciones adicionales aquí, +// 3. Crea una instancia del _router_ y pasa la opción `routes` +// Puedes pasar opciones adicionales aquí, // pero mantengámoslo simple por el momento. const router = new VueRouter({ routes // forma corta para routes: routes }) -// 4. Cree y monte la instancia principal. -// Asegúrese de inyectar el _router_ con la opcion router para +// 4. Crea y monta la instancia principal. +// Asegúrate de inyectar el _router_ con la opcion router para // garantizar que toda la aplicación tenga acceso al mismo. const app = new Vue({ router @@ -63,6 +63,6 @@ const app = new Vue({ // ¡Ahora la aplicación está ejecutándose! ``` -Puede consultar este [ejemplo](http://jsfiddle.net/yyx990803/xgrjzsup/). +Puedes consultar este [ejemplo](http://jsfiddle.net/yyx990803/xgrjzsup/). -Note que `` obtiene automaáticamente la clase `.router-link-active` cuando la ruta a la que apunta es accedida. Puede leer más acerca de eso en la documentación de la [API](../api/router-link.md). +Nota que `` obtiene automáticamente la clase `.router-link-active` cuando la ruta a la que apunta es accedida. Puedes leer más acerca de eso en la documentación de la [API](../api/router-link.md). diff --git a/docs/es/essentials/history-mode.md b/docs/es/essentials/history-mode.md index 35d7d98ff..1d525462a 100644 --- a/docs/es/essentials/history-mode.md +++ b/docs/es/essentials/history-mode.md @@ -2,7 +2,7 @@ El modo por defecto para `vue-router` es _hash mode_ - el cual utiliza una almohadilla para similar la URL completa para que la página no sea recargada cuando la URL cambia. -Para eliminar la almohadilla, podemos utilizar el **modo historia** del enrutador, el cual utiliza el método `history.pushState` de la API para conseguir una navegación sin recarga de página: +Para eliminar la almohadilla, podemos seleccionar el **modo historia** del enrutador, el cual utiliza el método `history.pushState` de la API para conseguir una navegación sin recarga de página: ``` js const router = new VueRouter({ @@ -11,11 +11,11 @@ const router = new VueRouter({ }) ``` -Cuando utilice el modo historia, la URL lucirá "normal", por ejemplo: `http://oursite.com/user/id`. ¡Hermoso! +Cuando utilices el modo historial, la URL lucirá "normal", por ejemplo: `http://oursite.com/user/id`. ¡Hermoso! -Sin embargo, hay un problema: dado que nuestra aplicación es de una sola página del lado cliente, sin una configuración apropiada de nuestro servidor, los usuarios van a obtener errores 404 si intentan acceder directamente a `http://oursite.com/user/id` en sus navegadores. Eso es horrible. +Sin embargo, hay un problema: dado que nuestra aplicación es de una sola página del lado cliente, sin una configuración apropiada del lado servidor, los usuarios van a obtener errores 404 si intentan acceder directamente a `http://oursite.com/user/id` en sus navegadores. Eso es horrible. -No hay problema: para solucionar el error, todo lo que debe hacer es agregar un redireccionamiento en su servidor. Si la URL no coincide con ningún recurso estático, debe apuntar a la misma página `index.html` donde se encuentra su aplicación. Nuevamente, ¡Hermoso! +No hay problema: para solucionar el error, todo lo que debes hacer es agregar un redireccionamiento en su servidor. Si la URL no coincide con ningún recurso estático, debes apuntar a la misma página `index.html` donde se encuentra su aplicación. Nuevamente, ¡Hermoso! ## Ejemplos de configuraciones de servidores @@ -42,11 +42,11 @@ location / { #### Node.js (Express) -Para Node.js/Express, considere utilizar el middleware [connect-history-api-fallback](https://github.com/bripkens/connect-history-api-fallback). +Para Node.js/Express, considera utilizar el middleware [connect-history-api-fallback](https://github.com/bripkens/connect-history-api-fallback). ## Contras -Hay una contra para esto: su servidor ya no reportará errores 404 dado que todas las rutas no encontradas serán redireccionadas a su archivo `index.html`. Para solucionar este problema debe implementar dentro de su aplicación Vue una ruta por defecto para mostrar una página de error 404: +Hay una contra para esto: tu servidor ya no reportará errores 404 dado que todas las rutas no encontradas serán redireccionadas al archivo `index.html`. Para solucionar este problema debes implementar dentro de la aplicación Vue una ruta por defecto para mostrar una página de error 404: ``` js const router = new VueRouter({ @@ -57,4 +57,4 @@ const router = new VueRouter({ }) ``` -Otra solución, si utiliza un servidor Node.js, es utilizar el enrutador del lado del servidor para analizar las URL ingresadas y responder con un error 404 si ninguna ruta coincide. +Otra solución, si utilizas un servidor Node.js, es utilizar el enrutador del lado del servidor para analizar las URL ingresadas y responder con un error 404 si ninguna ruta coincide. diff --git a/docs/es/essentials/named-routes.md b/docs/es/essentials/named-routes.md index ec8e91510..9c4106d43 100644 --- a/docs/es/essentials/named-routes.md +++ b/docs/es/essentials/named-routes.md @@ -1,6 +1,6 @@ # Rutas con nombre - A veces es conveniente identificar una ruta con un nombre, especialmente cuando enlazamos a esa ruta o navegamos programáticamente. Puede darle un nombre a una ruta en las opciones de `routes` cuando se crea la instancia de Router: + A veces es conveniente identificar una ruta con un nombre, especialmente cuando enlazamos a esa ruta o navegamos programáticamente. Puedes darle un nombre a una ruta en las opciones de `routes` cuando se crea la instancia de Router: ``` js const router = new VueRouter({ @@ -14,7 +14,7 @@ const router = new VueRouter({ }) ``` -Para enlazar a una ruta con nombre, puede pasar un objeto a la propiedad `to` del componente `router-link`: +Para enlazar a una ruta con nombre, puedes pasar un objeto a la propiedad `to` del componente `router-link`: ``` html User @@ -28,4 +28,4 @@ router.push({ name: 'user', params: { userId: 123 }}) En ambos casos, el enrutador navegará a la ruta `/user/123`. -Vea un ejemplo completo [aquí](https://github.com/vuejs/vue-router/blob/dev/examples/named-routes/app.js). +Revisa un ejemplo completo [aquí](https://github.com/vuejs/vue-router/blob/dev/examples/named-routes/app.js). diff --git a/docs/es/essentials/named-views.md b/docs/es/essentials/named-views.md index 7ced36501..6c5c7547f 100644 --- a/docs/es/essentials/named-views.md +++ b/docs/es/essentials/named-views.md @@ -1,6 +1,6 @@ # Vistas con nombre -A veces es necesario mostrar múltiples vistas al mismo tiempo en lugar de anidarlas, por ejemplo, cuando se crea una plantilla con una vista `sidebar` y una vista `main`. Aquí es cuando las vistas con nombre se vuelven útiles. En lugar de tener un solo _outlet_ es su vista, puede tener varios y darle a cada uno un nombre diferente. Por defecto, un `router-view` sin nombre se llamará `default`. +A veces es necesario mostrar múltiples vistas al mismo tiempo en lugar de anidarlas, por ejemplo, cuando se crea una plantilla con una vista `sidebar` y una vista `main`. Aquí es cuando las vistas con nombre se vuelven útiles. En lugar de tener un solo _outlet_ es tu vista, puedes tener varios y darle a cada uno un nombre diferente. Por defecto, un `router-view` sin nombre se llamará `default`. ``` html @@ -8,7 +8,7 @@ A veces es necesario mostrar múltiples vistas al mismo tiempo en lugar de anida ``` -Una vista se renderiza utilizando un componente, por lo tanto, múltiples vistas requerirán múltiples componentes para la misma ruta. Asegúrese de usar la opción `components` (con una _s_ al final): +Una vista se renderiza utilizando un componente, por lo tanto, múltiples vistas requerirán múltiples componentes para la misma ruta. Asegúrater de usar la opción `components` (con una _s_ al final): ``` js const router = new VueRouter({ @@ -25,5 +25,4 @@ const router = new VueRouter({ }) ``` -Puede ver una demostración de este ejemplo -[aquí](https://jsfiddle.net/posva/6du90epg/). +Puedes ver una demostración de este ejemplo [aquí](https://jsfiddle.net/posva/6du90epg/). diff --git a/docs/es/essentials/navigation.md b/docs/es/essentials/navigation.md index 184473fd7..e0e120315 100644 --- a/docs/es/essentials/navigation.md +++ b/docs/es/essentials/navigation.md @@ -4,9 +4,9 @@ Además de usar `` para crear etiquetas _a_ para una navegación de #### `router.push(location, onComplete?, onAbort?)` -Para navegar a una URL diferente, utilice `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. +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étpdp es el que se llama internamente cuando se hace clic en un ``, por lo que`` es el equivalente a ejecutar `router.push(...)`. +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(...)`. | Declarativo | Programático | |-------------|--------------| @@ -28,7 +28,7 @@ router.push({ name: 'user', params: { userId: 123 }}) router.push({ path: 'register', query: { plan: 'private' }}) ``` -A partir de la version 2.2.0+, puede opcionalmente proveer _callbacks_ `onComplete` y `onAbort` a `router.push` o `router.replace` como segundo y tercer argumento. Estas _callbacks_ serán ejecutadas cuando la navegación sea completada exitosamente (luego que todos los _hooks_ asíncronos sean resueltos), o abortada (navegando a la misma ruta, o a una ruta diferente antes que la navegación actual haya finalizado), respectivamente. +A partir de la version 2.2.0+, puedes opcionalmente pasar _callbacks_ `onComplete` y `onAbort` a `router.push` o `router.replace` como segundo y tercer parámetro. Estas _callbacks_ serán ejecutadas cuando la navegación sea completada exitosamente (luego que todos los _hooks_ asíncronos sean resueltos), o abortada (navegando a la misma ruta, o a una ruta diferente antes que la navegación actual haya finalizado), respectivamente. #### `router.replace(location, onComplete?, onAbort?)` @@ -55,15 +55,15 @@ router.go(-1) // Ir 3 pasos hacia adelante router.go(3) -// Fallá silenciosamente si no existe esa cantidad de registros en el historial +// Falla silenciosamente si no existe esa cantidad de registros en el historial router.go(-100) router.go(100) ``` #### Manipulación del historial -Seguramente notó que `router.push`, `router.replace` y `router.go` son contra partes de [`window.history.pushState`, `window.history.replaceState` y `window.history.go`](https://developer.mozilla.org/en-US/docs/Web/API/History), y que imitan a las API de `window.history`. +Seguramente notaste que `router.push`, `router.replace` y `router.go` son contra partes de [`window.history.pushState`, `window.history.replaceState` y `window.history.go`](https://developer.mozilla.org/en-US/docs/Web/API/History), y que imitan a las API de `window.history`. -Por lo tanto, si está familiarizado con las [API del historial del navegador](https://developer.mozilla.org/en-US/docs/Web/API/History_API), manipularlo será muy sencillo con vue-router. +Por lo tanto, si estás familiarizado con las [API del historial del navegador](https://developer.mozilla.org/en-US/docs/Web/API/History_API), manipularlo será muy sencillo con vue-router. Vale la pena mencionar que los métodos de navegacion de vue-router (`push`, `replace`, `go`) funcionan consistentemente en todos los modos de trabajo del enrutador (`history`, `hash` y `abstract`). diff --git a/docs/es/essentials/nested-routes.md b/docs/es/essentials/nested-routes.md index 03e9f8380..9b38eebbf 100644 --- a/docs/es/essentials/nested-routes.md +++ b/docs/es/essentials/nested-routes.md @@ -35,7 +35,7 @@ const router = new VueRouter({ }) ``` -Aquí, `` es un _outlet_ de nivel superior. Renderiza el componente que coincida con una ruta de nivel superior. Así, un componente renderizado puede contener su propio `` anidado. Por ejemplo, si agregamos uno dentro de la plantilla del componente `User`: +Aquí, `` es un contenedor de nivel superior. Renderiza el componente que coincida con una ruta de nivel superior. Así, un componente renderizado puede contener su propio `` anidado. Por ejemplo, si agregamos uno dentro de la plantilla del componente `User`: ``` js const User = { @@ -48,7 +48,7 @@ const User = { } ``` -Para renderizar componentes dentro de este _outlet_ anidado, necesitamos usar la opción `children` en la configuración del constructor de `VueRouter`: +Para renderizar componentes dentro de este contenedor anidado, necesitamos usar la opción `children` en la configuración del constructor de `VueRouter`: ``` js const router = new VueRouter({ @@ -73,11 +73,11 @@ const router = new VueRouter({ }) ``` -**Note que las rutas anidadas que empiecen con `/` serán tratadas como absolutas. Esto permite aprovechar el anidamiento de componentes sin tener que usar URL anidadas.** +**Nota que las rutas anidadas que empiecen con `/` serán tratadas como absolutas. Esto permite aprovechar el anidamiento de componentes sin tener que usar URL anidadas.** -Como puede ver, la opción `children` es simplemente otro arreglo de objetos de configuración de rutas, como `routes`. Por lo tanto, puede anidar tantas vistas como necesite. +Como puedes ver, la opción `children` es simplemente otro arreglo de objetos de configuración de rutas, como `routes`. Por lo tanto, puedes anidar tantas vistas como necesites. -En este punto, con la configuración anterior, cuando visite `/user/foo`, nada será renderizado dentro de, _outlet_ de `User`, porque ninguna sub ruta coincidió. Tal vez quiera renderizar algo ahí. En ese caso, puede proveer una sub ruta vacía: +En este punto, con la configuración anterior, cuando visites `/user/foo`, nada será renderizado dentro del contenedor de `User`, porque ninguna sub ruta coincidió. Tal vez quieras renderizar algo ahí. En ese caso, puedes pasar una sub ruta vacía: ``` js const router = new VueRouter({ @@ -96,4 +96,4 @@ const router = new VueRouter({ }) ``` -Puede encontrar una demostración de este ejemplo [aquí](http://jsfiddle.net/yyx990803/L7hscd8h/). +Puedes encontrar una demostración de este ejemplo [aquí](http://jsfiddle.net/yyx990803/L7hscd8h/). diff --git a/docs/es/essentials/passing-props.md b/docs/es/essentials/passing-props.md index 24e8694c3..85eb33cff 100644 --- a/docs/es/essentials/passing-props.md +++ b/docs/es/essentials/passing-props.md @@ -1,10 +1,10 @@ # Pasando Props a componentes de ruteo -Usar `$route` en su componente crea un estrecho acoplamiento con la ruta, lo cual limita la flexibilidad del componente dado que solo puede utilizarse en ciertas URL. +Usar `$route` en tu componente genera un estrecho acoplamiento con la ruta, lo cual limita la flexibilidad del componente dado que solo puede utilizarse en ciertas URL. -Para desacoplar el componente del enrutador utilice _props_: +Para desacoplar el componente del enrutador utiliza _props_: -**❌ Acoplado a$route** +**❌ Acoplado a $route** ``` js const User = { @@ -31,7 +31,7 @@ const router = new VueRouter({ }) ``` -Esto le permite utilizar el componente en cualquier lugar, lo cual hace al mismo reutilizable y más simple de testear. +Esto te permite utilizar el componente en cualquier lugar, lo cual hace al mismo reutilizable y más simple de testear. ### Modo booleano @@ -52,8 +52,8 @@ const router = new VueRouter({ ### Modo función -Puede crear una función que retorne _props_. -Esto le permite convertir los parámetros a otro tipo, combinar valores estáticos con valores basados en rutas, etc. +Puedes crear una función que retorne _props_. +Esto te permite convertir los parámetros a otro tipo, combinar valores estáticos con valores basados en rutas, etc. ``` js const router = new VueRouter({ @@ -65,8 +65,8 @@ const router = new VueRouter({ La URL: `/search?q=vue` pasaría `{query: "vue"}` como _props_ al componente SearchUser. -Intente crear funciones _props_ sin estado, dado que solo se evalúan cuando ocurren cambios de ruta. -Use un componente envolvente si necesita estado para definir las _props_, de esa manera Vue puede reaccionar a cambios de estado. +Intenta crear funciones _props_ sin estado, dado que solo se evalúan cuando ocurren cambios de ruta. +Utiliza un componente envolvente si necesitas estado para definir las _props_, de esa manera Vue puede reaccionar a cambios de estado. -Para un uso avanzado, vea el siguiente [ejemplo](https://github.com/vuejs/vue-router/blob/dev/examples/route-props/app.js). +Para un uso avanzado, aquí hay un [ejemplo](https://github.com/vuejs/vue-router/blob/dev/examples/route-props/app.js). diff --git a/docs/es/essentials/redirect-and-alias.md b/docs/es/essentials/redirect-and-alias.md index a657df796..fd4c7d260 100644 --- a/docs/es/essentials/redirect-and-alias.md +++ b/docs/es/essentials/redirect-and-alias.md @@ -22,20 +22,20 @@ const router = new VueRouter({ }) ``` -O incluso puede utilizar una función para un redireccionamiento dinámico: +O incluso puedes utilizar una función para un redireccionamiento dinámico: ``` js const router = new VueRouter({ routes: [ { path: '/a', redirect: to => { // la función recibe la ruta destino como argumento - // retorne aquí la ruta de redirección. + // retorna aquí la ruta de redirección. }} ] }) ``` -Para otros usos avanzados, vea el siguiente [ejemplo](https://github.com/vuejs/vue-router/blob/dev/examples/redirect/app.js). +Para otros usos avanzados, tienes el siguiente [ejemplo](https://github.com/vuejs/vue-router/blob/dev/examples/redirect/app.js). ### Alias @@ -53,6 +53,6 @@ const router = new VueRouter({ }) ``` -Un alias le da la libertad de mapear una estructura de _UI_ a una URL arbitraria, en lugar de estar restringido por la estructura anidada de la configuración. +Un alias te da la libertad de mapear una estructura de _UI_ a una URL arbitraria, en lugar de estar restringido por la estructura anidada de la configuración. -Para otros usos avanzados, vea el siguiente [ejemplo](https://github.com/vuejs/vue-router/blob/dev/examples/route-alias/app.js). +Para otros usos avanzados, aquí tienes un [ejemplo](https://github.com/vuejs/vue-router/blob/dev/examples/route-alias/app.js). diff --git a/docs/es/installation.md b/docs/es/installation.md index 0541f8498..36084d3d3 100644 --- a/docs/es/installation.md +++ b/docs/es/installation.md @@ -5,10 +5,10 @@ [https://unpkg.com/vue-router/dist/vue-router.js](https://unpkg.com/vue-router/dist/vue-router.js) -[Unpkg.com](https://unpkg.com) provee enlaces a CDN basadas en NPM. El enlace anterior siempre apuntará a la última versión en NPM. También puede usar una versión/etiqueta específica a través de URLs como`https://unpkg.com/vue-router@2.0.0/dist/vue-router.js`. +[Unpkg.com](https://unpkg.com) provee enlaces a CDN basadas en NPM. El enlace anterior siempre apuntará a la última versión en NPM. También puedes usar una versión/etiqueta específica a través de URLs como`https://unpkg.com/vue-router@2.0.0/dist/vue-router.js`. -Incluya `vue-router` luego de Vue y se instalará automáticamente: +Incluye `vue-router` luego de Vue y se instalará automáticamente: ``` html @@ -21,7 +21,7 @@ Incluya `vue-router` luego de Vue y se instalará automáticamente: npm install vue-router ``` -Cuando lo use con un sistema de empaquetamiento de módulos, debe instalarlo explícitamente a través de `Vue.use()`: +Cuando lo utilices con un sistema de empaquetamiento de módulos, debes instalarlo explícitamente a través de `Vue.use()`: ``` js import Vue from 'vue' @@ -30,11 +30,11 @@ import VueRouter from 'vue-router' Vue.use(VueRouter) ``` -No necesita hacer esto cuando utilice etiquetas _script_ globales. +No necesitas hacer esto cuando utilices etiquetas _script_ globales. ### Versión de desarrollo -Deberá clonar el repositorio directamente desde GitHub y construir `vue-router` usted mismo si quiere utilizar la última versión de desarrollo. +Debes clonar el repositorio directamente desde GitHub y construir `vue-router` tu mismo si quieres utilizar la última versión de desarrollo. ``` bash git clone https://github.com/vuejs/vue-router.git node_modules/vue-router From 444aa2daa934e85bfc6a23e094a517d0ff445cbd Mon Sep 17 00:00:00 2001 From: zeratulmdq Date: Thu, 6 Apr 2017 16:04:10 -0300 Subject: [PATCH 3/7] =?UTF-8?q?Revisi=C3=B3n=20general?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/es/SUMMARY.md | 6 +++--- docs/es/advanced/data-fetching.md | 4 ++-- docs/es/advanced/lazy-loading.md | 4 ++-- docs/es/advanced/meta.md | 2 +- docs/es/advanced/navigation-guards.md | 18 +++++++++--------- docs/es/advanced/scroll-behavior.md | 14 +++++++------- docs/es/api/component-injections.md | 4 ++-- docs/es/api/options.md | 8 ++++---- docs/es/api/route-object.md | 14 +++++++------- docs/es/api/router-instance.md | 10 +++++----- docs/es/api/router-link.md | 12 ++++++------ docs/es/api/router-view.md | 2 +- docs/es/essentials/dynamic-matching.md | 6 +++--- docs/es/essentials/getting-started.md | 2 +- docs/es/essentials/history-mode.md | 14 +++++++------- docs/es/essentials/named-routes.md | 6 +++--- docs/es/essentials/named-views.md | 4 ++-- docs/es/essentials/navigation.md | 12 ++++++------ docs/es/essentials/nested-routes.md | 6 +++--- docs/es/essentials/passing-props.md | 10 +++++----- docs/es/essentials/redirect-and-alias.md | 4 ++-- 21 files changed, 81 insertions(+), 81 deletions(-) diff --git a/docs/es/SUMMARY.md b/docs/es/SUMMARY.md index 8c710ea18..31a1c845e 100644 --- a/docs/es/SUMMARY.md +++ b/docs/es/SUMMARY.md @@ -9,18 +9,18 @@ - [Primeros pasos](essentials/getting-started.md) - [Coincidencia dinámica de rutas](essentials/dynamic-matching.md) - [Rutas anidadas](essentials/nested-routes.md) - - [Navegación programática](essentials/navigation.md) + - [Navegación mediante código](essentials/navigation.md) - [Rutas con nombre](essentials/named-routes.md) - [Vistas con nombre](essentials/named-views.md) - [Redireccionamiento y alias](essentials/redirect-and-alias.md) - - [Pasando Props a componentes de ruteo](essentials/passing-props.md) + - [Pasando propiedades a componentes de ruteo](essentials/passing-props.md) - [Modo historial HTML5](essentials/history-mode.md) - Avanzada - [Guardias de navegación](advanced/navigation-guards.md) - [Campos Meta en las rutas](advanced/meta.md) - [Transiciones](advanced/transitions.md) - [Obtención de datos](advanced/data-fetching.md) - - [Comportamiento del desplazamiento](advanced/scroll-behavior.md) + - [Comportamiento del scroll](advanced/scroll-behavior.md) - [Carga diferida](advanced/lazy-loading.md) - API - [router-link](api/router-link.md) diff --git a/docs/es/advanced/data-fetching.md b/docs/es/advanced/data-fetching.md index d5eae9a36..74a6ce72e 100644 --- a/docs/es/advanced/data-fetching.md +++ b/docs/es/advanced/data-fetching.md @@ -2,9 +2,9 @@ Puede que necesites obtener datos desde el servidor cuando una ruta es activada. Por ejemplo, antes de renderizar un perfil de usuario, puedes obtener la información de ese usuario desde el servidor. Podemos lograr esto de dos maneras diferentes: -- **Obtener la información después de la navegación**: realiza la navegación primero y luego obtén los datos en un _hook_ del ciclo de vida del componente entrante. Muestra algún tipo de indicador de carga mientras se espera la llegada de la información. +- **Obtener la información después de la navegación**: realiza la navegación primero y luego obtén los datos en un _hook_ del ciclo de vida del componente entrante. Muestra algún tipo de indicador de carga mientras esperas la llegada de la información. -- **Obtener la información antes de la navegación**: Obtén los datos antes de la navegación en el guardia de entrada de la ruta, y realiza la navegación luego de haberla obtenido. +- **Obtener la información antes de la navegación**: Obtén los datos antes de la navegación en la guardia de entrada de la ruta, y realiza la navegación luego de haberla obtenido. Técnicamente, ambas opciones son válidas - depende de la experiencia de usuario a la que apuntes. diff --git a/docs/es/advanced/lazy-loading.md b/docs/es/advanced/lazy-loading.md index ec9bf6487..4fa7ec767 100644 --- a/docs/es/advanced/lazy-loading.md +++ b/docs/es/advanced/lazy-loading.md @@ -21,7 +21,7 @@ Hay una alternativa a la sintaxis de división de código utilizando _require_ c const Foo = resolve => require(['./Foo.vue'], resolve) ``` -Nada debe cambiarse en la configuración del enrutador, simplemente utiliza `Foo` normalmente: +Nada debe cambiarse en la configuración del _router_, solo utiliza `Foo` como lo harías normalmente: ``` js const router = new VueRouter({ @@ -41,4 +41,4 @@ const Bar = r => require.ensure([], () => r(require('./Bar.vue')), 'group-foo') const Baz = r => require.ensure([], () => r(require('./Baz.vue')), 'group-foo') ``` -Webpack agrupará los módulos asíncronos con el mismo nombre dentro de la misma porción asíncrona - esto también significa que no necesitamos más listar explícitamente las dependencias de `require.ensure` (por lo tanto pasamos un arreglo vacio). \ No newline at end of file +Webpack agrupará los módulos asíncronos con el mismo nombre dentro de la misma porción asíncrona - esto también significa que no necesitamos más listar explícitamente las dependencias de `require.ensure` (por lo tanto pasamos un vector vacío). \ No newline at end of file diff --git a/docs/es/advanced/meta.md b/docs/es/advanced/meta.md index be4a72297..488ac7e69 100644 --- a/docs/es/advanced/meta.md +++ b/docs/es/advanced/meta.md @@ -27,7 +27,7 @@ Primero, cada objeto route en la configuración de `routes` se llama **registro Por ejemplo, con la configuración anterior, la URL `/foo/bar` coincidirá tanto con el registro de ruta padre como con el hijo. -Todos los registros de rutas que hayan coincidido son expuestos en el objeto `$route` (y también a los objetos route en los guardias de navegación) como el arreglo `$route.matched`. Por ende, necesitaremos iterar sobre `$route.matched` para verificar campos meta en los registros de rutas. +Todos los registros de rutas que hayan coincidido son expuestos en el objeto `$route` (y también a los objetos route en las guardias de navegación) como el arreglo `$route.matched`. Por ende, necesitaremos iterar sobre `$route.matched` para verificar campos meta en los registros de rutas. Un caso de uso de ejemplo es verificar la existencia de campos metas en los guardias de navegación global: diff --git a/docs/es/advanced/navigation-guards.md b/docs/es/advanced/navigation-guards.md index 5b00edabc..63b29b990 100644 --- a/docs/es/advanced/navigation-guards.md +++ b/docs/es/advanced/navigation-guards.md @@ -1,12 +1,12 @@ # Guardias de navegación -Como el nombre sugiere, los guardias de navegación provistas por `vue-router` son básicamente utilizadas para proteger rutas de navegación ya sea redireccionando o cancelandolas. Hay varias maneras de engancharse en el proceso de navegación de rutas: globalmente, por ruta o dentro de los componentes. +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 cancelandolas. 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 obtener reactividad 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. ### Guardias globales -Puedes registrar guardias _before_ globales usando `router.beforeEach`: +Puedes registrar guardias _before_ globales utilizando `router.beforeEach`: ``` js const router = new VueRouter({ ... }) @@ -16,7 +16,7 @@ router.beforeEach((to, from, next) => { }) ``` -Los guardias _before_ globales son llamados por orden de creación, cuando una navegación es disparada. Los guardias pueden ejecutarse asincrónicamente, y la navegación se considera **pendiente** antes que todos los _hooks_ sean resueltos. +Las guardias _before_ globales son llamados por orden de creación, cuando una navegación es disparada. Las guardias pueden ejecutarse asincrónicamente, y la navegación se considera **pendiente** hasta tanto todos los _hooks_ sean resueltos. Cada función guardia recibe tres argumentos: @@ -34,7 +34,7 @@ Cada función guardia recibe tres argumentos: **Asegúrese de llamar siempre a la función `next`, de otra manera el _hook_ nunca será resuelto.** -También puedes registrar _hooks after_ globales. 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 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 router.afterEach((to, from) => { @@ -64,7 +64,7 @@ Estos guardias tienen exactamente la misma firma que los guardias _before_ globa ### Guardias en componentes -Por último, puedes directamente definir guardias de navegación dentro de los componentes de ruta (los que son pasados a la configuración del enrutador) con las siguientes opciones: +Por último, puedes directamente definir guardias de navegación dentro de los componentes de ruta (los que son pasados a la configuración del `router`) con las siguientes opciones: - `beforeRouteEnter` - `beforeRouteUpdate` (agregado en la versión 2.2) @@ -94,9 +94,9 @@ const Foo = { } ``` -El guardia `beforeRouteEnter` **NO** tiene acceso a `this`, porque es ejecutado antes que la navegación sea confirmada, por lo tanto el componente destino todavía no ha sido creado. +La guardia `beforeRouteEnter` **NO** tiene acceso a `this`, porque es ejecutada antes que la navegación sea confirmada, por lo tanto el componente destino todavía no ha sido creado. -Sin embargo, puedes acceder a la instancia pasando una _callback_ a `next`. La _callback_ se ejecutará cuando la navegación sea confirmada, y la instancia del componente será pasada como argumento: +Sin embargo, puedes acceder a la instancia pasando una _función callback_ a `next`. La _función callback_ se ejecutará cuando la navegación sea confirmada, y la instancia del componente será pasada como argumento: ``` js beforeRouteEnter (to, from, next) { @@ -106,4 +106,4 @@ beforeRouteEnter (to, from, next) { } ``` -Puedes acceder directamente a `this` dentro de `beforeRouteLeave`. El guardia _leave_ se usa normalmente para prevenir al usuario cuando intenta abandonar la ruta accidentalmente sin guardar cambios. La navegación puede ser cancelada ejecutando `next(false)`. +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)`. diff --git a/docs/es/advanced/scroll-behavior.md b/docs/es/advanced/scroll-behavior.md index cdf033cdd..83f5d768b 100644 --- a/docs/es/advanced/scroll-behavior.md +++ b/docs/es/advanced/scroll-behavior.md @@ -1,10 +1,10 @@ -# Comportamiento del desplazamiento +# Comportamiento del scroll -Cuando se utiliza enrutamiento del lado cliente, podemos querer desplazarnos hacia el tope de la página cuando naveguemos a una nueva ruta, o preservar la posicón actual, tal cual lo hace una recarga de la página. `vue-router` te permite lograr esto e incluso más: permite personalizar completamente el comportamiento del desplazamiento en las navegaciones. +Cuando se utiliza enrutamiento del lado cliente, podemos querer hacer `scroll` hacia el inicio de la página cuando naveguemos a una nueva ruta, o preservar la posición actual, tal cual lo hace una recarga de la página. `vue-router` te permite lograr esto e incluso más: permite personalizar completamente el comportamiento del `scroll` durante la navegacion. **Nota: esta característica solo funciona en el modo historial de HTML5.** -Cuando crees una instancia del enrutador, puedes incluir la función `scrollBehavior`: +Cuando crees una instancia del `router`, puedes incluir la función `scrollBehavior`: ``` js const router = new VueRouter({ @@ -17,7 +17,7 @@ const router = new VueRouter({ La función `scrollBehavior` recibe los objetos de ruta `to` y `from`. El tercer parámetro, `savedPosition`, solo está disponible si estamos en una navegación `popstate` (cuando se utilizan los botones _atras_ o _adelante_ en el navegador). -La función puede devolver un objeto de posición de desplazamiento. El objeto puede ser de la forma: +La función puede devolver un objeto de posición de `scroll`. El objeto puede ser de la forma: - `{ x: number, y: number }` - `{ selector: string }` @@ -32,7 +32,7 @@ scrollBehavior (to, from, savedPosition) { } ``` -Esto hará que la página se desplace hacia el tope para todas las navegaciones a la ruta. +Esto hará que la página se desplace hacia el inicio para todas las navegaciones a la ruta. Devolver `savedPosition` hará que el comportamiento cuando se utilicen los botones _atras_ o _adelante_ sea el nativo: @@ -46,7 +46,7 @@ scrollBehavior (to, from, savedPosition) { } ``` -Si deseas simular el desplazamiento a anclas: +Si deseas simular el `scroll` hacia anclas: ``` js scrollBehavior (to, from, savedPosition) { @@ -58,4 +58,4 @@ scrollBehavior (to, from, savedPosition) { } ``` -También podemos utilizar [campos meta](meta.md) para implementar un control de desplazamientoto fino. Un ejemplo completo [aquí](https://github.com/vuejs/vue-router/blob/dev/examples/scroll-behavior/app.js). +También podemos utilizar [campos meta](meta.md) para implementar un control de `scroll` fino. Un ejemplo completo [aquí](https://github.com/vuejs/vue-router/blob/dev/examples/scroll-behavior/app.js). diff --git a/docs/es/api/component-injections.md b/docs/es/api/component-injections.md index b77a6d0c9..81fd890f4 100644 --- a/docs/es/api/component-injections.md +++ b/docs/es/api/component-injections.md @@ -2,11 +2,11 @@ ### Propiedades inyectadas -Estas propiedades son inyectadas dentro de cada componente hijo pasando la instancia del enrutador a la instancia principal como la opción `router`. +Estas propiedades son inyectadas dentro de cada componente hijo pasando la instancia del `router` a la instancia principal como la opción `router`. - #### $router - La instancia del enrutador. + La instancia del `router`. - #### $route diff --git a/docs/es/api/options.md b/docs/es/api/options.md index 8c5637741..6a69ddf1c 100644 --- a/docs/es/api/options.md +++ b/docs/es/api/options.md @@ -25,17 +25,17 @@ - tipo: `string` -- valor por defecto: `"hash" (in browser) | "abstract" (in Node.js)` +- valor por defecto: `"hash" (en navegadores) | "abstract" (en Node.js)` - valores disponibles: `"hash" | "history" | "abstract"` - Configura el modo del enrutador. + Configura el modo del `router`. - `hash`: utiliza el _hash_ en la URL para el enrutamiento. Funciona en todos los navegadores que soportan Vue, incluidos aquellos que no soportan la API de historial de HTML5 . - `history`: requiere la API de historial de HTML y configuración del lado servidor. [Modo historial HTML5](../essentials/history-mode.md). - - `abstract`: funciona en todos los ambientes de JavaScript, por ejemplo, del lado servidor con Node.js. **Se forzará este modo de trabajo en el enrutador si no se detecta la API de navegador.** + - `abstract`: funciona en todos los ambientes de JavaScript, por ejemplo, del lado servidor con Node.js. **Se forzará este modo de trabajo en el router si no se detecta la API de navegador.** ### base @@ -67,4 +67,4 @@ ) => { x: number, y: number } | { selector: string } | ?{} ``` - Para más detalles, [comportamiento del desplazamiento](../advanced/scroll-behavior.md). + Para más detalles, [comportamiento del scroll](../advanced/scroll-behavior.md). diff --git a/docs/es/api/route-object.md b/docs/es/api/route-object.md index a87de76a0..ac86268cc 100644 --- a/docs/es/api/route-object.md +++ b/docs/es/api/route-object.md @@ -1,18 +1,18 @@ # El objeto Route -Un **objeto de ruta** representa el estado de la ruta activa actualmente. Contiene información analizada de la URL actual y los **registros de rutas** que coinciden con ella. +Un **objeto Route** representa el estado de la ruta activa actualmente. Contiene información analizada de la URL actual y los **registros de rutas** que coinciden con ella. -El objeto ruta es inmutable. Cada navegación exitosa resultará en un nuevo objeto de ruta. +El objeto `Route` es inmutable. Cada navegación exitosa resultará en un nuevo objeto `Route`. -El objeto de ruta puede encontrarse en diferentes lugares. +El objeto `Route` puede encontrarse en diferentes lugares. - Dentro de los componentes, como `this.$route` -- Dentro de las _callbacks_ de observación de `$route` +- Dentro de las _funciones callbacks_ de observación de `$route` - Como valor de retorno de la función `router.match(location)` -- Dentro de los guardias de navegación como los primeros dos argumentos: +- Dentro de las guardias de navegación como los primeros dos argumentos: ``` js router.beforeEach((to, from, next) => { @@ -30,7 +30,7 @@ El objeto de ruta puede encontrarse en diferentes lugares. }) ``` -### Propiedades del objeto Ruta +### Propiedades del objeto Route - **$route.path** @@ -66,7 +66,7 @@ El objeto de ruta puede encontrarse en diferentes lugares. - tipo: `Array` - Un arreglo que contiene **registros de ruta** para todos los segmentos anidados de la ruta actual. Los registros de ruta son copias de los objetos en el arreglo de configuración `routes` (y en los arreglos `children`): + Un vector que contiene **registros de ruta** para todos los segmentos anidados de la ruta actual. Los registros de ruta son copias de los objetos en el vector de configuración `routes` (y en los vectores `children`): ``` js const router = new VueRouter({ diff --git a/docs/es/api/router-instance.md b/docs/es/api/router-instance.md index abd9aca70..16f6ad00a 100644 --- a/docs/es/api/router-instance.md +++ b/docs/es/api/router-instance.md @@ -12,7 +12,7 @@ - tipo: `string` - El [modo](options.md#mode) que el enrutador está utilizando. + El [modo](options.md#mode) que `router` está utilizando. #### router.currentRoute @@ -34,11 +34,11 @@ - **router.back()** - **router.forward()** - Navega programáticamente a una nueva URL. Info: [navegación programática](../essentials/navigation.md). + Navega mediante código a una nueva URL. Info: [navegación mediante código](../essentials/navigation.md). - **router.getMatchedComponents(location?)** - Devuelve un arreglo de componentes (definiciones/constructores, no instancias) que coincidan con la ubicación provista o la ruta actual. Se utiliza principalmente durante el renderizado del lado servidor para realizar precarga de datos. + Devuelve un vector de componentes (definiciones/constructores, no instancias) que coincidan con la ubicación provista o la ruta actual. Se utiliza principalmente durante el renderizado del lado servidor para realizar precarga de datos. - **router.resolve(location, current?, append?)** @@ -58,12 +58,12 @@ > 2.2.0+ - Agrega dinámicamente más rutas al enrutador. El argumento debe ser un arreglo utilizando el mismo formato de configuración que las opciones del constructor de `routes`. + Agrega dinámicamente más rutas al `router`. El argumento debe ser un vector utilizando el mismo formato de configuración que las opciones del constructor de `routes`. - **router.onReady(callback)** > 2.2.0+ - Este método pone una _callback_ en espera a ser llamada cuando el enrutador 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. + 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. diff --git a/docs/es/api/router-link.md b/docs/es/api/router-link.md index 421938804..bb7c2b1d0 100644 --- a/docs/es/api/router-link.md +++ b/docs/es/api/router-link.md @@ -1,10 +1,10 @@ # `` -`` es el componente para posibilitar la navegación de los usuarios en una aplicación con el enrutador habilitado. La ubicación destino se especifica con la propiedad `to`. Por defecto, renderiza una etiqueta `
    ` en el atributo `href` correspondiente, pero puede configurarse con la propiedad `tag`. Además, el enlace obtiene una clase CSS cuando la ruta a la que apunta es activada. +`` es el componente para posibilitar la navegación de los usuarios en una aplicación con el `router` habilitado. La ubicación destino se especifica con la propiedad `to`. Por defecto, renderiza una etiqueta `` con el atributo `href` correspondiente, pero puede configurarse mediante la propiedad `tag`. Además, el enlace obtiene una clase CSS cuando la ruta a la que apunta es activada. Es preferible utilizar `` en lugar de escribir directamente `` por las siguientes razones: -- Funciona de la misma manera tanto en el modo _hash_ como en el modo historial de HTML5, por lo que si decides intercambiar modos, o cuando el router utiliza el modo _hash_ en IE9, no deberás cambiar nada. +- Funciona de la misma manera tanto en el modo _hash_ como en el modo historial de HTML5, por lo que si decides intercambiar modos, o cuando el `router` utiliza el modo _hash_ en IE9, no deberás modificar nada. - En el modo historial de HTML5, `router-link` interceptará el evento _click_ para que el navegador no intente recargar la página. @@ -18,7 +18,7 @@ Es preferible utilizar `` en lugar de escribir directamente ` @@ -86,7 +86,7 @@ Es preferible utilizar `` en lugar de escribir directamente `` en lugar de escribir directamente ``, en ese caso, puedes renderizar el elemento envolvente utilizando `` y luego una etiqueta `` dentro: +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: ``` html diff --git a/docs/es/api/router-view.md b/docs/es/api/router-view.md index 726057316..9b4da1834 100644 --- a/docs/es/api/router-view.md +++ b/docs/es/api/router-view.md @@ -14,7 +14,7 @@ El componente `` es un componente funcional que renderiza a otro en ### Comportamiento -Cualquier propiedad diferente a `name` será pasado al componente renderizado, de cualquier manera, la mayor parte del tiempo los datos de la ruta están contenidos dentro de los parámetros de la ruta. +Cualquier propiedad diferente a `name` será pasada al componente renderizado. De cualquier manera, la mayor parte del tiempo los datos de la ruta están contenidos dentro de los parámetros de la ruta. Dado que es simplemente un componente, funciona con `` y ``. Cuando utilices ambos en conjunto, asegúrate de usar `` dentro de ``: diff --git a/docs/es/essentials/dynamic-matching.md b/docs/es/essentials/dynamic-matching.md index c3c7eec96..9c698165d 100644 --- a/docs/es/essentials/dynamic-matching.md +++ b/docs/es/essentials/dynamic-matching.md @@ -17,7 +17,7 @@ const router = new VueRouter({ Ahora, las URL como `/user/foo` y `/user/bar` mapearán a la misma ruta. -Un segmento dinámico se representa con dos puntos `:`. Cuando se encuentra una coincidencia en la ruta, el valor del segmento dinámico se expondrá como `this.$route.params` en cada componente. Por lo tanto, podremos renderizar el ID del usuario actual modificando el template de `User`de la siguiente manera: +Un segmento dinámico se representa mediante dos puntos `:`. Cuando se encuentra una coincidencia en la ruta, el valor del segmento dinámico se expondrá como `this.$route.params` en cada componente. Por lo tanto, podremos renderizar el ID del usuario actual modificando el template de `User`de la siguiente manera: ``` js const User = { @@ -36,9 +36,9 @@ Se pueden tener múltiples segmentos dinámicos en la misma ruta, y todos serán Además de `$route.params`, el objeto `$route` expone más información útil, como `$route.query` (si hay alguna _query_ en la URL), `$route.hash`, etc. Puedes verificar todos los detalles en la documentación de la [API](../api/route-object.md). -### Reaccionando a cambios en los parámetros +### Reaccionando ante cambios de los parámetros -Una cosa a tener en cuenta cuando se usan rutas con parámetros es que cuando el usuario navega de `/user/foo` a `/user/bar`, **la misma instancia del componente será reutilizada**. Dado que ambas rutas renderizan el mismo componente, esto es más eficiente que destruir la instancia anterior y crear una nueva. **Sin embargo, esto significa que los eventos del ciclo de vida del componentes no serán emitidos**. +Una cosa a tener en cuenta cuando se usan rutas con parámetros es que cuando el usuario navega de `/user/foo` a `/user/bar`, **la misma instancia del componente será reutilizada**. Dado que ambas rutas renderizan el mismo componente, esto es más eficiente que destruir la instancia anterior y crear una nueva. **Sin embargo, esto significa que los hooks del ciclo de vida del componentes no serán emitidos**. Para detectar cambios en los parámetros en el mismo componente, puedes observar el objeto `$route`: diff --git a/docs/es/essentials/getting-started.md b/docs/es/essentials/getting-started.md index 89f43ad9a..a4262297a 100644 --- a/docs/es/essentials/getting-started.md +++ b/docs/es/essentials/getting-started.md @@ -2,7 +2,7 @@ > Utilizaremos [ES2015](https://github.com/lukehoban/es6features) en el código de los ejemplos en esta guía. -Crear una aplicación de una sola página con Vue.js + vue-router es muy simple. Con Vue.js, ya estamos estructurando nuestra aplicación con componentes. Cuando agregamos vue-router, todo lo que debemos hacer es mapear nuestros componentes a las rutas e informar a vue-router donde renderizarlas. Aquí hay un ejemplo básico: +Crear una aplicación de una sola página (SPA por sus siglas en inglés) con Vue.js + vue-router es muy sencillo. Con Vue.js, ya estamos estructurando nuestra aplicación con componentes. Cuando agregamos vue-router, todo lo que debemos hacer es mapear nuestros componentes a las rutas e informar a vue-router donde renderizarlas. Aquí hay un ejemplo básico: > Todos los ejemplos utilizarán la versión independiente de Vue para hacer posible el análisis de plantillas. Más detalles [aquí](http://vuejs.org/guide/installation.html#Standalone-vs-Runtime-only-Build). diff --git a/docs/es/essentials/history-mode.md b/docs/es/essentials/history-mode.md index 1d525462a..f89b473ae 100644 --- a/docs/es/essentials/history-mode.md +++ b/docs/es/essentials/history-mode.md @@ -1,8 +1,8 @@ # Modo historia HTML5 -El modo por defecto para `vue-router` es _hash mode_ - el cual utiliza una almohadilla para similar la URL completa para que la página no sea recargada cuando la URL cambia. +El modo por defecto para `vue-router` es _hash mode_ - el cual utiliza una almohadilla para simular la URL completa para que la página no sea recargada cuando la URL cambia. -Para eliminar la almohadilla, podemos seleccionar el **modo historia** del enrutador, el cual utiliza el método `history.pushState` de la API para conseguir una navegación sin recarga de página: +Para eliminar la almohadilla, podemos seleccionar el **modo historia** del `router`, el cual utiliza el método `history.pushState` de la API para conseguir una navegación sin recarga de página: ``` js const router = new VueRouter({ @@ -13,9 +13,9 @@ const router = new VueRouter({ Cuando utilices el modo historial, la URL lucirá "normal", por ejemplo: `http://oursite.com/user/id`. ¡Hermoso! -Sin embargo, hay un problema: dado que nuestra aplicación es de una sola página del lado cliente, sin una configuración apropiada del lado servidor, los usuarios van a obtener errores 404 si intentan acceder directamente a `http://oursite.com/user/id` en sus navegadores. Eso es horrible. +Sin embargo, hay un problema: dado que nuestra aplicación es de una sola página del lado cliente, sin una configuración apropiada del lado servidor los usuarios van a obtener errores 404 si intentan acceder directamente a `http://oursite.com/user/id` en sus navegadores. Eso es horrible. -No hay problema: para solucionar el error, todo lo que debes hacer es agregar un redireccionamiento en su servidor. Si la URL no coincide con ningún recurso estático, debes apuntar a la misma página `index.html` donde se encuentra su aplicación. Nuevamente, ¡Hermoso! +No hay problema: para solucionar el error, todo lo que debes hacer es agregar un redireccionamiento en tu servidor. Si la URL no coincide con ningún recurso estático, debes apuntar a la misma página `index.html` donde se encuentra tu aplicación. De nuevo, ¡Hermoso! ## Ejemplos de configuraciones de servidores @@ -44,9 +44,9 @@ location / { Para Node.js/Express, considera utilizar el middleware [connect-history-api-fallback](https://github.com/bripkens/connect-history-api-fallback). -## Contras +## Deventajas -Hay una contra para esto: tu servidor ya no reportará errores 404 dado que todas las rutas no encontradas serán redireccionadas al archivo `index.html`. Para solucionar este problema debes implementar dentro de la aplicación Vue una ruta por defecto para mostrar una página de error 404: +Hay una deventaja para esto: tu servidor ya no reportará errores 404 dado que todas las rutas no encontradas serán redireccionadas al archivo `index.html`. Para solucionar este problema debes implementar dentro de la aplicación Vue una ruta por defecto para mostrar una página de error 404: ``` js const router = new VueRouter({ @@ -57,4 +57,4 @@ const router = new VueRouter({ }) ``` -Otra solución, si utilizas un servidor Node.js, es utilizar el enrutador del lado del servidor para analizar las URL ingresadas y responder con un error 404 si ninguna ruta coincide. +Otra solución, si utilizas un servidor Node.js, es utilizar el `router` del lado del servidor para analizar las URL ingresadas y responder con un error 404 si ninguna ruta coincide. diff --git a/docs/es/essentials/named-routes.md b/docs/es/essentials/named-routes.md index 9c4106d43..222e953eb 100644 --- a/docs/es/essentials/named-routes.md +++ b/docs/es/essentials/named-routes.md @@ -1,6 +1,6 @@ # Rutas con nombre - A veces es conveniente identificar una ruta con un nombre, especialmente cuando enlazamos a esa ruta o navegamos programáticamente. Puedes darle un nombre a una ruta en las opciones de `routes` cuando se crea la instancia de Router: + A veces es conveniente identificar una ruta con un nombre, especialmente cuando enlazamos a esa ruta o navegamos mediante código. Puedes darle un nombre a una ruta en las opciones de `routes` cuando se crea la instancia de Router: ``` js const router = new VueRouter({ @@ -20,12 +20,12 @@ Para enlazar a una ruta con nombre, puedes pasar un objeto a la propiedad `to` d User ``` -Este es exactamente el mismo objeto utilizado programáticamente con `router.push()`: +Este es exactamente el mismo objeto utilizado mediante código con `router.push()`: ``` js router.push({ name: 'user', params: { userId: 123 }}) ``` -En ambos casos, el enrutador navegará a la ruta `/user/123`. +En ambos casos, el _router_ navegará a la ruta `/user/123`. Revisa un ejemplo completo [aquí](https://github.com/vuejs/vue-router/blob/dev/examples/named-routes/app.js). diff --git a/docs/es/essentials/named-views.md b/docs/es/essentials/named-views.md index 6c5c7547f..e82a34e1d 100644 --- a/docs/es/essentials/named-views.md +++ b/docs/es/essentials/named-views.md @@ -1,6 +1,6 @@ # Vistas con nombre -A veces es necesario mostrar múltiples vistas al mismo tiempo en lugar de anidarlas, por ejemplo, cuando se crea una plantilla con una vista `sidebar` y una vista `main`. Aquí es cuando las vistas con nombre se vuelven útiles. En lugar de tener un solo _outlet_ es tu vista, puedes tener varios y darle a cada uno un nombre diferente. Por defecto, un `router-view` sin nombre se llamará `default`. +A veces es necesario mostrar múltiples vistas al mismo tiempo en lugar de anidarlas. Por ejemplo, cuando se crea una plantilla con una vista `sidebar` y una vista `main`. Aquí es cuando las vistas con nombre se vuelven útiles. En lugar de tener un solo _outlet_ en tu vista, puedes tener varios y darle a cada uno un nombre diferente. Por defecto, un `router-view` sin nombre se llamará `default`. ``` html @@ -8,7 +8,7 @@ A veces es necesario mostrar múltiples vistas al mismo tiempo en lugar de anida ``` -Una vista se renderiza utilizando un componente, por lo tanto, múltiples vistas requerirán múltiples componentes para la misma ruta. Asegúrater de usar la opción `components` (con una _s_ al final): +Una vista se renderiza utilizando un componente, por lo tanto, múltiples vistas requerirán múltiples componentes para la misma ruta. Asegúrate de utilizar la opción `components` (con una _s_ al final): ``` js const router = new VueRouter({ diff --git a/docs/es/essentials/navigation.md b/docs/es/essentials/navigation.md index e0e120315..0d753ccd4 100644 --- a/docs/es/essentials/navigation.md +++ b/docs/es/essentials/navigation.md @@ -1,6 +1,6 @@ -# Navegación programática +# Navegación mediante código -Además de usar `` para crear etiquetas _a_ para una navegación declarativa, podemos hacer lo mismo programáticamente usando los métodos de la instancia del enrutador. +Además de utilizar `` para crear etiquetas _a_ para una navegación declarativa, podemos hacer lo mismo a través de código usando los métodos de la instancia del enrutador. #### `router.push(location, onComplete?, onAbort?)` @@ -8,7 +8,7 @@ Para navegar a una URL diferente, utiliza `router.push`. Este método agrega una 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(...)`. -| Declarativo | Programático | +| Declarativo | Mediante código | |-------------|--------------| | `` | `router.push(...)` | @@ -28,13 +28,13 @@ router.push({ name: 'user', params: { userId: 123 }}) router.push({ path: 'register', query: { plan: 'private' }}) ``` -A partir de la version 2.2.0+, puedes opcionalmente pasar _callbacks_ `onComplete` y `onAbort` a `router.push` o `router.replace` como segundo y tercer parámetro. Estas _callbacks_ serán ejecutadas cuando la navegación sea completada exitosamente (luego que todos los _hooks_ asíncronos sean resueltos), o abortada (navegando a la misma ruta, o a una ruta diferente antes que la navegación actual haya finalizado), respectivamente. +A partir de la version 2.2.0+, puedes opcionalmente pasar _funciones callbacks_ `onComplete` y `onAbort` a `router.push` o `router.replace` como segundo y tercer argumento. Estas _funciones callbacks_ serán ejecutadas cuando la navegación sea completada exitosamente (luego que todos los _hooks_ asíncronos sean resueltos), o abortada (navegando a la misma ruta, o a una ruta diferente antes que la navegación actual haya finalizado), respectivamente. #### `router.replace(location, onComplete?, onAbort?)` Actúa como `router.push`, la única diferencia es que navega sin agregar una nueva entrada al historial, como su nombre sugiere - reemplaza la entrada actual. -| Declarativo | Programático | +| Declarativo | Mediante código | |-------------|--------------| | `` | `router.replace(...)` | @@ -66,4 +66,4 @@ Seguramente notaste que `router.push`, `router.replace` y `router.go` son contra Por lo tanto, si estás familiarizado con las [API del historial del navegador](https://developer.mozilla.org/en-US/docs/Web/API/History_API), manipularlo será muy sencillo con vue-router. -Vale la pena mencionar que los métodos de navegacion de vue-router (`push`, `replace`, `go`) funcionan consistentemente en todos los modos de trabajo del enrutador (`history`, `hash` y `abstract`). +Vale la pena mencionar que los métodos de navegacion de vue-router (`push`, `replace`, `go`) funcionan consistentemente en todos los modos de trabajo del `router` (`history`, `hash` y `abstract`). diff --git a/docs/es/essentials/nested-routes.md b/docs/es/essentials/nested-routes.md index 9b38eebbf..3c01edd0c 100644 --- a/docs/es/essentials/nested-routes.md +++ b/docs/es/essentials/nested-routes.md @@ -13,7 +13,7 @@ Las interfaces de usuario (UI por sus siglas en inglés) de aplicaciones reales +------------------+ +-----------------+ ``` -Con `vue-router` es muy simple expresar esta relación usando configuraciones de rutas anidadas. +Con `vue-router` es muy sencillo expresar esta relación usando configuraciones de rutas anidadas. Dada la aplicación que creamos en el capítulo anterior: @@ -75,9 +75,9 @@ const router = new VueRouter({ **Nota que las rutas anidadas que empiecen con `/` serán tratadas como absolutas. Esto permite aprovechar el anidamiento de componentes sin tener que usar URL anidadas.** -Como puedes ver, la opción `children` es simplemente otro arreglo de objetos de configuración de rutas, como `routes`. Por lo tanto, puedes anidar tantas vistas como necesites. +Como puedes ver, la opción `children` es simplemente otro vector de objetos de configuración de rutas, como `routes`. Por lo tanto, puedes anidar tantas vistas como necesites. -En este punto, con la configuración anterior, cuando visites `/user/foo`, nada será renderizado dentro del contenedor de `User`, porque ninguna sub ruta coincidió. Tal vez quieras renderizar algo ahí. En ese caso, puedes pasar una sub ruta vacía: +En este punto, con la configuración anterior, cuando visites `/user/foo`, nada será renderizado dentro del contenedor de `User` porque ninguna sub ruta coincidió. Tal vez quieras renderizar algo ahí. En ese caso, puedes pasar una sub ruta vacía: ``` js const router = new VueRouter({ diff --git a/docs/es/essentials/passing-props.md b/docs/es/essentials/passing-props.md index 85eb33cff..e33aedc14 100644 --- a/docs/es/essentials/passing-props.md +++ b/docs/es/essentials/passing-props.md @@ -1,6 +1,6 @@ -# Pasando Props a componentes de ruteo +# Pasando propiedades a componentes de ruteo -Usar `$route` en tu componente genera un estrecho acoplamiento con la ruta, lo cual limita la flexibilidad del componente dado que solo puede utilizarse en ciertas URL. +Usar `$route` en tu componente genera un acoplamiento estrecho con la ruta, lo cual limita la flexibilidad del componente dado que solo puede utilizarse en ciertas URL. Para desacoplar el componente del enrutador utiliza _props_: @@ -31,11 +31,11 @@ const router = new VueRouter({ }) ``` -Esto te permite utilizar el componente en cualquier lugar, lo cual hace al mismo reutilizable y más simple de testear. +Esto te permite utilizar el componente en cualquier lugar, lo cual hace al mismo reutilizable y más sencillo de testear. -### Modo booleano +### Modo boolean -Cuando _props_ tiene asignado el valor true, route.params serán asignados como las _props_ del componente. +Cuando _props_ tiene asignado el valor true, `route.params` serán asignados como las _props_ del componente. ### Modo objeto diff --git a/docs/es/essentials/redirect-and-alias.md b/docs/es/essentials/redirect-and-alias.md index fd4c7d260..cce4a8c49 100644 --- a/docs/es/essentials/redirect-and-alias.md +++ b/docs/es/essentials/redirect-and-alias.md @@ -2,7 +2,7 @@ ### Redireccionamiento -El redireccionamiento se realiza en la configuración de `routes`. Para redireccionar de `/a` a `/b`: +El redireccionamiento también se realiza en la configuración de `routes`. Para redireccionar desde `/a` hasta `/b`: ``` js const router = new VueRouter({ @@ -43,7 +43,7 @@ Una redirección significa que el usuario visita `/a`, y la URL será reemplazad **Un alias de `/a` como `/b` significa que cuando el usuario visita `/b`, la URL se mantiene como `/b`, pero el código ejecutado corresponderá al mismo que si el usuario visitase `/a`.** -Lo anterior puede ser expresado en la configuracion de enrutamiento como: +Lo anterior puede ser expresado en la configuración de enrutamiento como: ``` js const router = new VueRouter({ From 81173ca6937a9922bdd8707da2f9a4c256d09c5d Mon Sep 17 00:00:00 2001 From: zeratulmdq Date: Fri, 7 Apr 2017 19:01:55 -0300 Subject: [PATCH 4/7] Minor fixes --- docs/es/SUMMARY.md | 2 +- docs/es/advanced/data-fetching.md | 4 ++-- docs/es/advanced/lazy-loading.md | 2 +- docs/es/advanced/meta.md | 4 ++-- docs/es/advanced/navigation-guards.md | 2 +- docs/es/api/options.md | 2 +- docs/es/api/route-object.md | 4 ++-- docs/es/api/router-instance.md | 4 ++-- docs/es/api/router-view.md | 2 +- docs/es/essentials/getting-started.md | 2 +- docs/es/essentials/nested-routes.md | 8 ++++---- 11 files changed, 18 insertions(+), 18 deletions(-) diff --git a/docs/es/SUMMARY.md b/docs/es/SUMMARY.md index 31a1c845e..3b68baecd 100644 --- a/docs/es/SUMMARY.md +++ b/docs/es/SUMMARY.md @@ -8,7 +8,7 @@ - Esenciales - [Primeros pasos](essentials/getting-started.md) - [Coincidencia dinámica de rutas](essentials/dynamic-matching.md) - - [Rutas anidadas](essentials/nested-routes.md) + - [Sub-rutas](essentials/nested-routes.md) - [Navegación mediante código](essentials/navigation.md) - [Rutas con nombre](essentials/named-routes.md) - [Vistas con nombre](essentials/named-views.md) diff --git a/docs/es/advanced/data-fetching.md b/docs/es/advanced/data-fetching.md index 74a6ce72e..986695f2d 100644 --- a/docs/es/advanced/data-fetching.md +++ b/docs/es/advanced/data-fetching.md @@ -2,7 +2,7 @@ Puede que necesites obtener datos desde el servidor cuando una ruta es activada. Por ejemplo, antes de renderizar un perfil de usuario, puedes obtener la información de ese usuario desde el servidor. Podemos lograr esto de dos maneras diferentes: -- **Obtener la información después de la navegación**: realiza la navegación primero y luego obtén los datos en un _hook_ del ciclo de vida del componente entrante. Muestra algún tipo de indicador de carga mientras esperas la llegada de la información. +- **Obtener la información después de la navegación**: realiza la navegación primero y luego obtén los datos en un _hook_ del ciclo de vida del componente entrante. Mientras esperas la respuesta del servidor, este _hook_ puede ser usado para mostrar un indicador de carga. - **Obtener la información antes de la navegación**: Obtén los datos antes de la navegación en la guardia de entrada de la ruta, y realiza la navegación luego de haberla obtenido. @@ -10,7 +10,7 @@ Técnicamente, ambas opciones son válidas - depende de la experiencia de usuari ## Obtener la información después de la navegación -Cuando utilizamos este enfoque, navegamos y renderizamos el componente entrante inmediatamente, y obtenemos los datos en el _hook_ `create` del componente. Nos posibilita mostrar un indicador de estado de carga mientras se obtiene la información a través de la red, y también podemos manejar la carga de datos de manera diferente para cada vista. +Cuando utilizamos este enfoque, navegamos y renderizamos el componente entrante inmediatamente, y obtenemos los datos en el _hook_ `create` del componente. Nos posibilita mostrar un indicador de estado de carga mientras se obtiene la información desde un servidor remoto, y también podemos manejar la carga de datos de manera diferente para cada vista. Asumamos que tenemos un componente `Post` que necesita obtener datos de un _post_ basándose en `$route.params.id`: diff --git a/docs/es/advanced/lazy-loading.md b/docs/es/advanced/lazy-loading.md index 4fa7ec767..ba71150e0 100644 --- a/docs/es/advanced/lazy-loading.md +++ b/docs/es/advanced/lazy-loading.md @@ -41,4 +41,4 @@ const Bar = r => require.ensure([], () => r(require('./Bar.vue')), 'group-foo') const Baz = r => require.ensure([], () => r(require('./Baz.vue')), 'group-foo') ``` -Webpack agrupará los módulos asíncronos con el mismo nombre dentro de la misma porción asíncrona - esto también significa que no necesitamos más listar explícitamente las dependencias de `require.ensure` (por lo tanto pasamos un vector vacío). \ No newline at end of file +Webpack agrupará los módulos asíncronos con el mismo nombre dentro de la misma porción asíncrona - esto también significa que no necesitamos más listar explícitamente las dependencias de `require.ensure` (por lo tanto pasamos un array vacío). \ No newline at end of file diff --git a/docs/es/advanced/meta.md b/docs/es/advanced/meta.md index 488ac7e69..feed2f7d1 100644 --- a/docs/es/advanced/meta.md +++ b/docs/es/advanced/meta.md @@ -27,14 +27,14 @@ Primero, cada objeto route en la configuración de `routes` se llama **registro Por ejemplo, con la configuración anterior, la URL `/foo/bar` coincidirá tanto con el registro de ruta padre como con el hijo. -Todos los registros de rutas que hayan coincidido son expuestos en el objeto `$route` (y también a los objetos route en las guardias de navegación) como el arreglo `$route.matched`. Por ende, necesitaremos iterar sobre `$route.matched` para verificar campos meta en los registros de rutas. +Todos los registros de rutas que hayan coincidido son expuestos en el objeto `$route` (y también a los objetos route en las guardias de navegación) como el array `$route.matched`. Por ende, necesitaremos iterar sobre `$route.matched` para verificar campos meta en los registros de rutas. Un caso de uso de ejemplo es verificar la existencia de campos metas en los guardias de navegación global: ``` js router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requiresAuth)) { - // esta ruta requiere autentiación, verificamos que haya iniciado sesión + // esta ruta requiere autenticación, verificamos que haya iniciado sesión // sino, redirigimos a la página de inicio de sesión. if (!auth.loggedIn()) { next({ diff --git a/docs/es/advanced/navigation-guards.md b/docs/es/advanced/navigation-guards.md index 63b29b990..e0a850f8d 100644 --- a/docs/es/advanced/navigation-guards.md +++ b/docs/es/advanced/navigation-guards.md @@ -16,7 +16,7 @@ router.beforeEach((to, from, next) => { }) ``` -Las guardias _before_ globales son llamados por orden de creación, cuando una navegación es disparada. Las guardias pueden ejecutarse asincrónicamente, y la navegación se considera **pendiente** hasta tanto todos los _hooks_ sean resueltos. +Las guardias _before_ globales son llamadas por orden de creación, cuando una navegación comienza. Las guardias pueden ejecutarse asincrónicamente, y la navegación se considera **pendiente** hasta tanto todos los _hooks_ sean resueltos. Cada función guardia recibe tres argumentos: diff --git a/docs/es/api/options.md b/docs/es/api/options.md index 6a69ddf1c..6d9fe2817 100644 --- a/docs/es/api/options.md +++ b/docs/es/api/options.md @@ -15,7 +15,7 @@ redirect?: string | Location | Function; props?: boolean | string | Function; alias?: string | Array; - children?: Array; // para rutas anidadas + children?: Array; // para sub-rutas beforeEnter?: (to: Route, from: Route, next: Function) => void; meta?: any; } diff --git a/docs/es/api/route-object.md b/docs/es/api/route-object.md index ac86268cc..4aaae4fc0 100644 --- a/docs/es/api/route-object.md +++ b/docs/es/api/route-object.md @@ -66,7 +66,7 @@ El objeto `Route` puede encontrarse en diferentes lugares. - tipo: `Array` - Un vector que contiene **registros de ruta** para todos los segmentos anidados de la ruta actual. Los registros de ruta son copias de los objetos en el vector de configuración `routes` (y en los vectores `children`): + Un array que contiene **registros de ruta** para todos los segmentos anidados de la ruta actual. Los registros de ruta son copias de los objetos en el array de configuración `routes` (y en los arrays `children`): ``` js const router = new VueRouter({ @@ -82,7 +82,7 @@ El objeto `Route` puede encontrarse en diferentes lugares. }) ``` - Cuando la URL es `/foo/bar`, `$route.matched` será un arreglo que contendrá ambos objetos (clonados), en orden descendente de padre a hijo. + Cuando la URL es `/foo/bar`, `$route.matched` será un array que contendrá ambos objetos (clonados), en orden descendente de padre a hijo. - **$route.name** diff --git a/docs/es/api/router-instance.md b/docs/es/api/router-instance.md index 16f6ad00a..382aa472c 100644 --- a/docs/es/api/router-instance.md +++ b/docs/es/api/router-instance.md @@ -38,7 +38,7 @@ - **router.getMatchedComponents(location?)** - Devuelve un vector de componentes (definiciones/constructores, no instancias) que coincidan con la ubicación provista o la ruta actual. Se utiliza principalmente durante el renderizado del lado servidor para realizar precarga de datos. + Devuelve un array de componentes (definiciones/constructores, no instancias) que coincidan con la ubicación provista o la ruta actual. Se utiliza principalmente durante el renderizado del lado servidor para realizar precarga de datos. - **router.resolve(location, current?, append?)** @@ -58,7 +58,7 @@ > 2.2.0+ - Agrega dinámicamente más rutas al `router`. El argumento debe ser un vector utilizando el mismo formato de configuración que las opciones del constructor de `routes`. + 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)** diff --git a/docs/es/api/router-view.md b/docs/es/api/router-view.md index 9b4da1834..fb5b63ecd 100644 --- a/docs/es/api/router-view.md +++ b/docs/es/api/router-view.md @@ -1,6 +1,6 @@ # `` -El componente `` es un componente funcional que renderiza a otro en base a la ruta seleccionada. Los componentes renderizados en `` pueden contener su propio ``, el cual renderizará componentes para rutas anidadas. +El componente `` es un componente funcional que renderiza a otro en base a la ruta seleccionada. Los componentes renderizados en `` pueden contener su propio ``, el cual renderizará componentes para sub-rutas. ### Propiedades diff --git a/docs/es/essentials/getting-started.md b/docs/es/essentials/getting-started.md index a4262297a..cee0421ff 100644 --- a/docs/es/essentials/getting-started.md +++ b/docs/es/essentials/getting-started.md @@ -40,7 +40,7 @@ const Bar = { template: '
    bar
    ' } // Cada ruta debe mapear a un componente. El "componente" puede // ser un constructor de componente creado a través de // Vue.extend(), o simplemente un objeto de opciones de componente. -// Más tarde hablaremos acerca de las rutas anidadas. +// Más tarde hablaremos acerca de las sub-rutas. const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } diff --git a/docs/es/essentials/nested-routes.md b/docs/es/essentials/nested-routes.md index 3c01edd0c..0a57ce116 100644 --- a/docs/es/essentials/nested-routes.md +++ b/docs/es/essentials/nested-routes.md @@ -1,4 +1,4 @@ -# Rutas anidadas +# Sub-rutas Las interfaces de usuario (UI por sus siglas en inglés) de aplicaciones reales normalmente están compuestas por componentes que están anidados varios niveles. Es también muy común que los segmentos de una URL correspondan a cierta estructura de componentes anidados, por ejemplo: @@ -13,7 +13,7 @@ Las interfaces de usuario (UI por sus siglas en inglés) de aplicaciones reales +------------------+ +-----------------+ ``` -Con `vue-router` es muy sencillo expresar esta relación usando configuraciones de rutas anidadas. +Con `vue-router` es muy sencillo expresar esta relación usando configuraciones de sub-rutas. Dada la aplicación que creamos en el capítulo anterior: @@ -73,9 +73,9 @@ const router = new VueRouter({ }) ``` -**Nota que las rutas anidadas que empiecen con `/` serán tratadas como absolutas. Esto permite aprovechar el anidamiento de componentes sin tener que usar URL anidadas.** +**Nota que las sub-rutas que empiecen con `/` serán tratadas como absolutas. Esto permite aprovechar el anidamiento de componentes sin tener que usar URL anidadas.** -Como puedes ver, la opción `children` es simplemente otro vector de objetos de configuración de rutas, como `routes`. Por lo tanto, puedes anidar tantas vistas como necesites. +Como puedes ver, la opción `children` es simplemente otro array de objetos de configuración de rutas, como `routes`. Por lo tanto, puedes anidar tantas vistas como necesites. En este punto, con la configuración anterior, cuando visites `/user/foo`, nada será renderizado dentro del contenedor de `User` porque ninguna sub ruta coincidió. Tal vez quieras renderizar algo ahí. En ese caso, puedes pasar una sub ruta vacía: From dbdf457b484efa09035b99a87f5f3139cf5d5a54 Mon Sep 17 00:00:00 2001 From: zeratulmdq Date: Wed, 19 Apr 2017 11:57:22 -0300 Subject: [PATCH 5/7] Changes requested 2017-04-12 --- docs/es/SUMMARY.md | 8 ++++---- docs/es/advanced/data-fetching.md | 12 ++++++------ docs/es/advanced/lazy-loading.md | 4 ++-- docs/es/api/component-injections.md | 2 +- docs/es/api/router-link.md | 4 ++-- docs/es/essentials/dynamic-matching.md | 12 ++++++------ 6 files changed, 21 insertions(+), 21 deletions(-) diff --git a/docs/es/SUMMARY.md b/docs/es/SUMMARY.md index 3b68baecd..3f0c393f1 100644 --- a/docs/es/SUMMARY.md +++ b/docs/es/SUMMARY.md @@ -7,7 +7,7 @@ - [Instalación](installation.md) - Esenciales - [Primeros pasos](essentials/getting-started.md) - - [Coincidencia dinámica de rutas](essentials/dynamic-matching.md) + - [Matching dinámico de rutas](essentials/dynamic-matching.md) - [Sub-rutas](essentials/nested-routes.md) - [Navegación mediante código](essentials/navigation.md) - [Rutas con nombre](essentials/named-routes.md) @@ -15,17 +15,17 @@ - [Redireccionamiento y alias](essentials/redirect-and-alias.md) - [Pasando propiedades a componentes de ruteo](essentials/passing-props.md) - [Modo historial HTML5](essentials/history-mode.md) -- Avanzada +- Avanzado - [Guardias de navegación](advanced/navigation-guards.md) - [Campos Meta en las rutas](advanced/meta.md) - [Transiciones](advanced/transitions.md) - [Obtención de datos](advanced/data-fetching.md) - [Comportamiento del scroll](advanced/scroll-behavior.md) - - [Carga diferida](advanced/lazy-loading.md) + - [Lazy loading](advanced/lazy-loading.md) - API - [router-link](api/router-link.md) - [router-view](api/router-view.md) - [El objeto Route](api/route-object.md) - [Opciones del constructor de Router](api/options.md) - [La instancia de Router](api/router-instance.md) - - [Inyección de componentes](api/component-injections.md) + - [Inyección en componentes](api/component-injections.md) diff --git a/docs/es/advanced/data-fetching.md b/docs/es/advanced/data-fetching.md index 986695f2d..e8dae4a87 100644 --- a/docs/es/advanced/data-fetching.md +++ b/docs/es/advanced/data-fetching.md @@ -1,16 +1,16 @@ # Obtención de datos -Puede que necesites obtener datos desde el servidor cuando una ruta es activada. Por ejemplo, antes de renderizar un perfil de usuario, puedes obtener la información de ese usuario desde el servidor. Podemos lograr esto de dos maneras diferentes: +A veces es necesario obtener datos del servidor cuando una ruta es activada. Por ejemplo, antes de renderizar un perfil de usuario, puedes obtener la información de ese usuario desde el servidor. Podemos lograr esto de dos maneras diferentes: -- **Obtener la información después de la navegación**: realiza la navegación primero y luego obtén los datos en un _hook_ del ciclo de vida del componente entrante. Mientras esperas la respuesta del servidor, este _hook_ puede ser usado para mostrar un indicador de carga. +- **Obtener la información después de la navegación**: realiza la navegación primero y luego obtén los datos en un _hook_ del ciclo de vida del componente entrante. Puedes mostrar un indicador de carga mientras se obtienen los datos. -- **Obtener la información antes de la navegación**: Obtén los datos antes de la navegación en la guardia de entrada de la ruta, y realiza la navegación luego de haberla obtenido. +- **Obtener la información antes de la navegación**: Obtén los datos antes de la navegación en la guardia de entrada de la ruta, y realiza la navegación una vez estos obtenidos. -Técnicamente, ambas opciones son válidas - depende de la experiencia de usuario a la que apuntes. +Técnicamente, ambas opciones son válidas - todo depende de la experiencia de usuario a la que apuntes. ## Obtener la información después de la navegación -Cuando utilizamos este enfoque, navegamos y renderizamos el componente entrante inmediatamente, y obtenemos los datos en el _hook_ `create` del componente. Nos posibilita mostrar un indicador de estado de carga mientras se obtiene la información desde un servidor remoto, y también podemos manejar la carga de datos de manera diferente para cada vista. +Cuando utilizamos este enfoque, navegamos y renderizamos el componente entrante inmediatamente, y obtenemos los datos en el _hook_ `created` del componente. Esto nos permite mostrar un indicador de estado de carga mientras se obtiene la información desde un servidor remoto, y también manejar la carga de datos según la ruta. Asumamos que tenemos un componente `Post` que necesita obtener datos de un _post_ basándose en `$route.params.id`: @@ -110,4 +110,4 @@ export default { } ``` -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 mensaje global de advertencia. +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. diff --git a/docs/es/advanced/lazy-loading.md b/docs/es/advanced/lazy-loading.md index ba71150e0..667518a61 100644 --- a/docs/es/advanced/lazy-loading.md +++ b/docs/es/advanced/lazy-loading.md @@ -1,8 +1,8 @@ -# Carga diferida de rutas +# Lazy loading Cuando se construyen aplicaciones con un sistema de empaquetamiento de módulos, el archivo JavaScript resultante puede terminar siendo muy grande, afectando los tiempos de carga de la página. Sería más eficiente si pudiesemos dividir los componentes de cada ruta en porciones separadas y cargarlas solo cuando esa ruta es visitada. -Combinando [las características asíncronas de componentes de Vue](http://vuejs.org/guide/components.html#Async-Components) y las características de división de código de [Webpack](https://webpack.js.org/guides/code-splitting-require/), es trivial la carga diferida de componentes de ruta. +Combinando [las características asíncronas de componentes de Vue](http://vuejs.org/guide/components.html#Async-Components) y las características de división de código de [Webpack](https://webpack.js.org/guides/code-splitting-require/), es trivial el _lazy loading_ de componentes de ruta. Todo lo que necesitamos es definir nuestros componentes de rutas como asíncronos: diff --git a/docs/es/api/component-injections.md b/docs/es/api/component-injections.md index 81fd890f4..d7dab556f 100644 --- a/docs/es/api/component-injections.md +++ b/docs/es/api/component-injections.md @@ -1,4 +1,4 @@ -# Inyección de componentes +# Inyección en componentes ### Propiedades inyectadas diff --git a/docs/es/api/router-link.md b/docs/es/api/router-link.md index bb7c2b1d0..a8f6ca550 100644 --- a/docs/es/api/router-link.md +++ b/docs/es/api/router-link.md @@ -94,9 +94,9 @@ Es preferible utilizar `` en lugar de escribir directamente `
    ` obtendrá la clase CSS mientras la ruta actual comience con `/a/` o sea `/a`. + El comportamiento por defecto para la aplicación de la clase CSS activa en matching dinámico de rutas es **inclusivo**. Por ejemplo, `` obtendrá la clase CSS mientras la ruta actual comience con `/a/` o sea `/a`. - Una consecuencia de esto es que `` ¡permanecerá activa para todas las rutas! Para forzar una coincidencia exacta, utiliza la propiedad `exact`: + Una consecuencia de esto es que `` ¡permanecerá activa para todas las rutas! Para forzar un matching exacto, utiliza la propiedad `exact`: ``` html diff --git a/docs/es/essentials/dynamic-matching.md b/docs/es/essentials/dynamic-matching.md index 9c698165d..f991ef1bc 100644 --- a/docs/es/essentials/dynamic-matching.md +++ b/docs/es/essentials/dynamic-matching.md @@ -1,4 +1,4 @@ -# Coincidencia dinámica de rutas +# Matching dinámico de rutas Es bastante común tener que mapear rutas con un patrón determinado al mismo componente. Por ejemplo, puede que tengamos un componente `User` el cual debería ser renderizado para todos los usuarios, pero con diferente ID. En `vue-router` podemos usar un segmento dinámico en el _path_ para lograrlo: @@ -29,7 +29,7 @@ Puedes consultar el siguiente [ejemplo](http://jsfiddle.net/yyx990803/4xfa2f19/) Se pueden tener múltiples segmentos dinámicos en la misma ruta, y todos serán mapeados a los correspondientes campos en `$route.params`. Por ejemplo: -| patrón | coincidencia de ruta | $route.params | +| patrón | matching de ruta | $route.params | |---------|------|--------| | /user/:username | /user/evan | `{ username: 'evan' }` | | /user/:username/post/:post_id | /user/evan/post/123 | `{ username: 'evan', post_id: 123 }` | @@ -53,10 +53,10 @@ const User = { } ``` -### Patrones de coincidencia avanzados +### Patrones de matching avanzados -`vue-router` usa [path-to-regexp](https://github.com/pillarjs/path-to-regexp) como su motor de búsqueda de patrones, por lo que soporta varios patrones de coincidencia avanzados tales como segmentos dinámicos opcionales, requerimientos del tipo cero o más / uno o más, e incluso patrones _regex_ personalizados. Verifica la [documentación](https://github.com/pillarjs/path-to-regexp#parameters) para estos patrones avanzados, y [este ejemplo](https://github.com/vuejs/vue-router/blob/dev/examples/route-matching/app.js) de como usarlos con `vue-router`. +`vue-router` usa [path-to-regexp](https://github.com/pillarjs/path-to-regexp) como su motor de búsqueda de patrones, por lo que soporta varios patrones de matching avanzados tales como segmentos dinámicos opcionales, requerimientos del tipo cero o más / uno o más, e incluso patrones _regex_ personalizados. Verifica la [documentación](https://github.com/pillarjs/path-to-regexp#parameters) para estos patrones avanzados, y [este ejemplo](https://github.com/vuejs/vue-router/blob/dev/examples/route-matching/app.js) de como usarlos con `vue-router`. -### Prioridad en la coincidencia de patrones +### Prioridad en el matching de patrones -A veces la misma URL puede coinciide con múltiples rutas. En ese caso, la prioridad en la coincidencia se determina por el orden de la definición de las rutas: la primera ruta definida será la que tenga mayor prioridad. +A veces la misma URL puede coincidir con múltiples rutas. En ese caso, la prioridad se determina por el orden de la definición de las rutas: la primera ruta definida será la que tenga mayor prioridad. From 80ce693dda550dfcb338c670570ec5cee825477e Mon Sep 17 00:00:00 2001 From: zeratulmdq Date: Sat, 13 May 2017 15:16:38 -0300 Subject: [PATCH 6/7] Changes requested 2017-05-12 --- docs/es/advanced/navigation-guards.md | 2 +- docs/es/advanced/scroll-behavior.md | 6 +++--- docs/es/api/router-link.md | 2 +- docs/es/essentials/dynamic-matching.md | 12 ++++++++++++ docs/es/essentials/getting-started.md | 2 +- docs/es/essentials/navigation.md | 2 +- 6 files changed, 19 insertions(+), 7 deletions(-) diff --git a/docs/es/advanced/navigation-guards.md b/docs/es/advanced/navigation-guards.md index e0a850f8d..cef4e9c7b 100644 --- a/docs/es/advanced/navigation-guards.md +++ b/docs/es/advanced/navigation-guards.md @@ -1,6 +1,6 @@ # Guardias de navegación -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 cancelandolas. Hay varias maneras de engancharse en el proceso de navegación de rutas: globalmente, por ruta o dentro de los componentes. +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. diff --git a/docs/es/advanced/scroll-behavior.md b/docs/es/advanced/scroll-behavior.md index 83f5d768b..88024d197 100644 --- a/docs/es/advanced/scroll-behavior.md +++ b/docs/es/advanced/scroll-behavior.md @@ -1,6 +1,6 @@ # Comportamiento del scroll -Cuando se utiliza enrutamiento del lado cliente, podemos querer hacer `scroll` hacia el inicio de la página cuando naveguemos a una nueva ruta, o preservar la posición actual, tal cual lo hace una recarga de la página. `vue-router` te permite lograr esto e incluso más: permite personalizar completamente el comportamiento del `scroll` durante la navegacion. +Cuando se utiliza enrutamiento del lado cliente, podemos querer hacer `scroll` hacia el inicio de la página cuando naveguemos a una nueva ruta, o preservar la posición actual, tal cual lo hace una recarga de la página. `vue-router` te permite lograr esto e incluso más: permite personalizar completamente el comportamiento del `scroll` durante la navegación. **Nota: esta característica solo funciona en el modo historial de HTML5.** @@ -15,7 +15,7 @@ const router = new VueRouter({ }) ``` -La función `scrollBehavior` recibe los objetos de ruta `to` y `from`. El tercer parámetro, `savedPosition`, solo está disponible si estamos en una navegación `popstate` (cuando se utilizan los botones _atras_ o _adelante_ en el navegador). +La función `scrollBehavior` recibe los objetos de ruta `to` y `from`. El tercer parámetro, `savedPosition`, solo está disponible si estamos en una navegación `popstate` (cuando se utilizan los botones _atrás_ o _adelante_ en el navegador). La función puede devolver un objeto de posición de `scroll`. El objeto puede ser de la forma: @@ -34,7 +34,7 @@ scrollBehavior (to, from, savedPosition) { Esto hará que la página se desplace hacia el inicio para todas las navegaciones a la ruta. -Devolver `savedPosition` hará que el comportamiento cuando se utilicen los botones _atras_ o _adelante_ sea el nativo: +Devolver `savedPosition` hará que el comportamiento cuando se utilicen los botones _atrás_ o _adelante_ sea el nativo: ``` js scrollBehavior (to, from, savedPosition) { diff --git a/docs/es/api/router-link.md b/docs/es/api/router-link.md index a8f6ca550..b7eed152c 100644 --- a/docs/es/api/router-link.md +++ b/docs/es/api/router-link.md @@ -113,7 +113,7 @@ Es preferible utilizar `` en lugar de escribir directamente ` Todos los ejemplos utilizarán la versión independiente de Vue para hacer posible el análisis de plantillas. Más detalles [aquí](http://vuejs.org/guide/installation.html#Standalone-vs-Runtime-only-Build). +> Todos los ejemplos utilizarán la versión independiente de Vue para hacer posible el análisis de plantillas. Más detalles [aquí](https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only). ### HTML diff --git a/docs/es/essentials/navigation.md b/docs/es/essentials/navigation.md index 0d753ccd4..cd6b3a96e 100644 --- a/docs/es/essentials/navigation.md +++ b/docs/es/essentials/navigation.md @@ -1,6 +1,6 @@ # Navegación mediante código -Además de utilizar `` para crear etiquetas _a_ para una navegación declarativa, podemos hacer lo mismo a través de código usando los métodos de la instancia del enrutador. +Además de utilizar `` para crear etiquetas `a` para una navegación declarativa, podemos hacer lo mismo a través de código usando los métodos de la instancia del enrutador. #### `router.push(location, onComplete?, onAbort?)` From d994773356217e0f36b996d33bf7a463189a8e47 Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Wed, 17 May 2017 11:30:53 +0200 Subject: [PATCH 7/7] 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 cef4e9c7b..8c079a752 100644 --- a/docs/es/advanced/navigation-guards.md +++ b/docs/es/advanced/navigation-guards.md @@ -16,7 +16,7 @@ router.beforeEach((to, from, next) => { }) ``` -Las guardias _before_ globales son llamadas por orden de creación, cuando una navegación comienza. Las guardias pueden ejecutarse asincrónicamente, y la navegación se considera **pendiente** hasta tanto todos los _hooks_ sean resueltos. +Las guardias _before_ globales son llamadas por orden de creación, cuando una navegación comienza. Las guardias pueden ejecutarse asincrónicamente, y la navegación se considera **pendiente** hasta que todos los _hooks_ sean resueltos. Cada función guardia recibe tres argumentos: @@ -32,7 +32,7 @@ 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. -**Asegúrese de llamar siempre a la función `next`, de otra manera el _hook_ nunca será resuelto.** +**Asegúrese de llamar siempre a la función `next`, sino el _hook_ nunca será resuelto.** 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: