Enrutamiento aún más avanzado con Vue: obtención de datos

En la última publicación, Enrutamiento más avanzado con Vue, cubrimos el usoTransicionesconEnrutador VueEsta vez cubriremosObtención de datosconEnrutador Vue.

Obtención de datosnos permite cargar datos asincrónicos en nuestros componentes enrutados. También podemos especificar si los datos se obtienen antes o después de que se cargue un componente. Ambas estrategias son igualmente viables, pero tienen diferentes implementaciones. Trataremos ambas.

Configuración del proyecto Vue

Dado que esta es otra publicación sobre técnicas avanzadas de Vue Router, asumiremos que ya está familiarizado con la configuración básica. Sin embargo, definamos un punto de partida que usaremos para el resto de la publicación:

# Yarn$ yarn add vue-router# npm$ npm install vue-router --save

principal.js

import Vue from 'vue';import VueRouter from 'vue-router';import App from './App';import Swamp from './components/Swamp';import Gator from './components/Gator';Vue.use(VueRouter);const router = new VueRouter({  routes: [    { path: '/swamp', component: Swamp },    { path: '/gator', component: Gator }  ]});new Vue({  render: h = h(App),  router}).$mount('#app')

Aplicación.vue

template  div    div      router-link to="/swamp"Swamp/router-link |      router-link to="/gator"Gator/router-link    /div    hr /    div      router-view/router-view    /div  /div/templatescriptexport default { name: 'App' }/script

componentes/Swamp.vue

template  divWelcome to the Swamp, {{ name }}!/div/templatescriptexport default {  name: 'Swamp',  data() {    return { name: null }  },}/script

componentes/Gator.vue

template  divHowdy, Gator {{ name }}!/div/templatescriptexport default {  name: 'Gator',  data() {    return { name: null }  }}/script

Obtención de datos

Digamos que teníamos una función que simulaba un HTTP simple GETllamado pretendGet():

scripts/pretendGet.js

export default (callback) = {  setTimeout(() = {    callback(null, 'Alice');  }, 500);}

Después de 500 ms, pretendGet()la cadena se devolverá 'Alice'al método de devolución de llamada callback. Lo usaremos para simular una solicitud de servidor en los siguientes ejemplos.

Recuperación antes de la navegación

AtractivoantesLa navegación nos permite asegurarnos de que nuestros componentes enrutados tengan los datos que necesitan antes de mostrarse al usuario. En este enfoque, agregamos un beforeRouteEntermétodo queEnrutador VueSe llama cuando el usuario solicita navegar a este componente pero antes de que se haya cargado. También definimos un beforeRouteUpdatemétodo que se llama cuando cambia la ruta. Esto es útil si está obteniendo datos relacionados con un parámetro de ruta al que se puede acceder mediante to.params.

componentes/Gator.vue

import pretendGet from '../scripts/pretendGet';export default {  name: 'Gator',  data() {    return { name: null }  },  // Component not loaded yet  beforeRouteEnter(to, from, next) {    pretendGet((err, name) = {      next(vm = vm.setName(err, name));    });  },  // Component already loaded and route changes  beforeRouteUpdate(to, from, next) {    this.name = null;    pretendGet((err, name) = {      this.setName(err, name);      next();    });  },  methods: {    setName(err, name) {      if (err) {        console.error(err);      } else {        this.name = name;      }    }  }}

Tenga en cuenta que la navegación no se realizará hasta que se obtengan los datos. Por este motivo, es una buena idea mostrar algún tipo de barra de progreso o indicador de que se están obteniendo los datos. Si hay un error, también sería una buena idea mostrarlo.

Obtención después de la navegación

AtractivodespuésLa navegación también es un enfoque válido. En este caso, utilizaremos el created()gancho de ciclo de vida para llamar a nuestro método de obtención de datos fetchName(). También definiremos una watchpropiedad en $routepara que podamos llamar fetchName()cada vez que cambie la ruta.

componentes/Swamp.vue

import pretendGet from '../scripts/pretendGet';export default {  name: 'Swamp',  data() {    return { name: null }  },  created() {    this.fetchName();  },  watch: {    // Re-fetch when route changes    '$route': 'fetchName'  },  methods: {    fetchName() {      pretendGet((err, name) = {        if (err) {          console.error(err);        } else {          this.name = name;        }      });    }  }}

Tenga en cuenta que con este enfoque tendremos que tener en cuenta que los datos no están listos cuando se renderiza el componente por primera vez. Es una buena idea incluir marcadores de posición o marcadores de posición de esqueleto junto con indicadores para que el usuario sepa que se están recuperando los datos junto con los errores que puedan ocurrir.

Terminando

Enrutador Vue Obtención de datoses una excelente manera de garantizar una experiencia de usuario fluida para los componentes que dependen de la obtención de datos de fuentes externas. La obtención antes de la navegación es un buen enfoque si te gusta usar notificaciones o indicadores de progreso en toda la aplicación. Si prefieres gestionar este tipo de cosas a nivel de componente, la obtención después de la navegación puede ser el enfoque adecuado para ti. Como siempre, ¡asegúrate de leer la documentación!