Vue2.5 23 turismo página de detalles de instancia de proyectos Ajax acceso dinámico a los datos

La creación de una rama: Detalle-ajax

Y tirando de la rama local de conmutación:

git pull 
git checkout detalle -ajax

página abierta Detail.vue, agregue el código:

axios importación de '' axios 

de exportación por defecto { 
  data () { 
    retorno { 
      sightName: '', // 大标题 
      bannerImg: '', // bandera 
      gallaryImgs: [], // 画廊轮播
      lista: [] 
    } 
  }, 
  montada () { 
    este .getDetailInfo () 
  }, 
  métodos: { 
    getDetailInfo () { 
      axios.get ( '/api/detail.json' , 
        {params: {id: este . route.params.id}} $ 
      ) .then ( este .getDetailInfoSucc) 
    },
    getDetailInfoSucc (res) { 
      res = res.data
       // console.log (res) 
      si (res.ret && res.data) {
         este .sightName = res.data.sightName
         este .bannerImg = res.data.bannerImg
         esta .gallaryImgs = res.data.gallaryImgs
         este .list = res.data.ticketList 
      } 
    } 
  } 
}

Luego se pasa a la sub-ensamblaje:

< Plantilla > 
< div > 
  < detalle-banner : sightName = "sightName" 
   : bannerImg = "bannerImg" : gallaryImgs = "gallaryImgs" > </ detalle-banner > 
  < -cabecera detalle > </ detalle cabecera > 
  < div estilo = "altura: 50rem" > 
    < detalle-list : lista = "lista" > </ detalle lista > 
  </ div > 
</ div > 
</ Plantilla >

recepción abierta Banner.vue:

< Plantilla > 
< div > 
  < div clase = "bandera" @Haga clic = "handleBanner" > 
    < img clase = "banner-img" : src = "bannerImg"  /> 
    < div clase = "banner-info" > 
      < div clase = "bandera-title" > {{}} this.sightName </ div > 
      < div clase = "banner-número" > 
        < i clase ="banner-icono iconfont" > & # xe692; </ i> 
         {{}} This.gallaryImgs.length 
      </ div > 
    </ div > 
  </ div > 
  < común gallary : IMG = "gallaryImgs" v-show = "showGallary" @close = "gallaryClose" > </ común- gallary > 
</ div > 
</ plantilla > 

< secuencia de comandos > 
CommonGallary importación de ' / gallary / gallary común ' 
de exportación por defecto { 
  puntales: { 
    sightName: cadena,
    bannerImg: Cadena,
    gallaryImgs: Array 
  },
} 
</ Script de >

Esta atrás en el tiempo para volver a entrar en la página de otros detalles, la solicitud Identificación del descubrimiento o 0001, y no a la re-petición. Debido a que usamos mantenimiento de conexión, a fin de utilizar el gancho del ciclo de vida activa:

activado () {
     este .getDetailInfo () 
  },

Lo siguiente también puede cambiar otra forma de resolver este problema: exclude = "nombre del componente"

Abrir el archivo App.vue:

< Plantilla > 
  < div ID = "aplicación" > 
    < mantenimiento de conexión excluye = "Detalle" > 
      < enrutador vista /> 
    </ keep-alive > 
  </ div > 
</ plantilla >

Detalle Se dice que, aparte del nombre del componente, el resto de páginas se almacenan en caché.

Nota : Hay un problema, es decir, métodos usados Header.vue archivo de ciclo de vida en el original se activa, pero ha cancelado la caché, para cambiarlo de nuevo con montada, de lo contrario no funcionará.

Tras la actualización de vuelta a casa desde la página de detalles, haga clic en en otra página para entrar en los detalles y se encontró que volver a iniciar la petición Ajax.

Cada página en el nombre , sabe que hay tres propósitos:

1. Para utilizar un componentes recursivas, se utilizará el nombre

2. Cuando se desea cancelar un caché de páginas, nombre también usado

3. navegador en Vue.js Devtools Vue plug-in, verá el nombre de componente de nombre

También hay un pequeño fallo: cuando la página se desplaza en la mitad del tiempo, haga clic en la página de detalles, una página para abrir los detalles, sino también en la posición media. Esperamos que cada nuevo entrar en una página, en la parte superior de la página.

Comportamiento de desplazamiento

El uso de enrutamiento de front-end, al cambiar a la nueva ruta, que quiere rodar la parte superior de la página, o mantener la posición de avance de la pantalla, simplemente recargar la página como. vue-router puede hacer, pero mejor, que le permite localizar a una costumbre conmutador de encaminamiento según la forma de desplazarse.

Nota: Esta función sólo está disponible en el navegador soporte history.pushState.

Index.js archivo de ruta abierta, añadir:

scrollBehavior (a, desde, savedPosition) {
   retorno {x: 0, y: 0 } 
}

bien, la función de lograr.

A continuación, añadir algo de contenido a sí mismo:

< Plantilla > 
< div > 
  < div clase = "punto" v-de = "(artículo, índice) en la lista" : clave = "índice" > 
    < div clase = "tema-título border-bottom" > 
      < lapso de clase = "tema-título-icono" > </ envergadura > 
      {{}} item.title 
    </ div > 
    < div v-si = "item.int" clase = "item-int" > {{}} item.int < / div >
    < Div v-si = "item.openTime"clase = "item-OpenTime" > {{}} item.openTime </ div > 
    < div v-si = "item.tel" clase = "item-tel" > {{}} item.tel </ div > 
    < div v-si = "item.address" clase = "item-dirección" > {{}} item.address </ div > 
    < div clase = "item-niños" v-si = "item.children" > 
      < detalle -lista : lista = "item.children" > </ Detalle lista > 
    </ div> 
  </ Div > 
</ div > 
</ plantilla >

representaciones:

 

Archivado Código:

Agregar el GIT. 
git el commit -m " para completar la página de detalles de un acceso dinámico a los datos de 
git Push 

git checkout master 
GIT Combinar el detalle ajax- 
git Push