Merge remote-tracking branch 'upstream/dev' into working

Author: MachinisteWeb

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/)

docs/es/README.md

@@ -0,0 +1 @@
+{% include "./SUMMARY.md" %}

docs/es/SUMMARY.md

@@ -0,0 +1,31 @@
+# vue-router 2
+<!--email_off-->
+> 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).
+<!--/email_off-->
+**[Notas de lanzamiento](https://github.com/vuejs/vue-router/releases)**
+
+- [Instalación](installation.md)
+- Esenciales
+  - [Primeros pasos](essentials/getting-started.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)
+  - [Vistas con nombre](essentials/named-views.md)
+  - [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)
+- 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)
+  - [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 en componentes](api/component-injections.md)

docs/es/advanced/data-fetching.md

@@ -0,0 +1,113 @@
+# Obtención de datos
+
+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. 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 una vez estos obtenidos.
+
+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_ `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`:
+
+``` html
+<template>
+  <div class="post">
+    <div class="loading" v-if="loading">
+      Loading...
+    </div>
+
+    <div v-if="error" class="error">
+      {{ error }}
+    </div>
+
+    <div v-if="post" class="content">
+      <h2>{{ post.title }}</h2>
+      <p>{{ post.body }}</p>
+    </div>
+  </div>
+</template>
+```
+
+``` js
+export default {
+  data () {
+    return {
+      loading: false,
+      post: null,
+      error: null
+    }
+  },
+  created () {
+    // obtén los datos cuando la vista es creada y _data_ ya
+    // está siendo observada
+    this.fetchData()
+  },
+  watch: {
+    // ejecuta nuevamente el método si la ruta cambia
+    '$route': 'fetchData'
+  },
+  methods: {
+    fetchData () {
+      this.error = this.post = null
+      this.loading = true
+      // reemplaza 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` del 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) {
+        // muestra 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 advertencia global.

docs/es/advanced/lazy-loading.md

@@ -0,0 +1,44 @@
+# 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 el _lazy loading_ 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 _router_, solo utiliza `Foo` como lo harías 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 array vacío).

docs/es/advanced/meta.md

@@ -0,0 +1,51 @@
+# Campos Meta en las rutas
+
+Puedes incluir un campo `meta` cuando definas 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 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 autenticació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úrate de ejecutar next siempre!
+  }
+})
+```

docs/es/advanced/navigation-guards.md

@@ -0,0 +1,109 @@
+# 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 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.
+
+### Guardias globales
+
+Puedes registrar guardias _before_ globales utilizando `router.beforeEach`:
+
+``` js
+const router = new VueRouter({ ... })
+
+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 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`, 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:
+
+``` js
+router.afterEach((to, from) => {
+  // ...
+})
+```
+
+### Guardias por ruta
+
+Puedes definir 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, 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)
+- `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`
+  }
+}
+```
+
+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 _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) {
+  next(vm => {
+    // accede a la instancia del componente a través de `vm`
+  })
+}
+```
+
+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)`.