Vue2.5 学习笔记 9.6 使用Ajax获取动态数据

怼烎@ 2022-02-21 04:21 224阅读 0赞

1. 获取AJAX数据

模拟后端传过来的JSON

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70][]

获取数据：

Banner.vue子组件展示数据：

<template>
      <div>
        <div class="banner" @click="handleBannerClick">
    // 这里
          <img class="banner-img" :src="bannerImg" />
          <div class="banner-info">
    // 这里
            <div class="banner-title">{
       {this.sightName}}</div>
            <div class="banner-number"><span class="iconfont banner-icon"></span>
    //这里
              {
       {this.gallaryImgs.length}}
            </div>
          </div>
        </div>
        <common-gallary
    // 这里
          :imgs="gallaryImgs"
          v-show="showGallary"
          @close="handleGallaryClose"
        >
        </common-gallary>
      </div>
    </template>
    
      props: {
        sightName: String,
        bannerImg: String,
        gallaryImgs: Array
      },

List.vue：

<template>
      <div>
        <div
          class="item"
          v-for="(item, index) of list"
          :key="index"
        >
          <div class="item-title border-bottom">
            <span class="item-title-icon"></span>
            {
       {item.title}}
          </div>
          <div v-if="item.children" class="item-children">
    //这里 
            <detail-list :list="item.children"></detail-list>
          </div>
        </div>
      </div>
    </template>
    
    
    <script>
    export default {
      name: 'DetailList',
      props: {
        list: Array
      }
    }
    </script>

到了这里主要的是写完了。但是还有2个BUG

mounted会做缓存 所以每次点击页面进来 都不会再重新请求数据 这样 id永远都是001

所以需要如下操作：

// 根目录的App.vue
    
    <template>
      <div id="app">
    // 他这里吧所有的组件都用keep-alive包裹建缓存   使用exclude 排除组件 也就是说 Detail这个组件不执行缓存机制。
        <keep-alive exclude="Detail">
          <router-view/>
        </keep-alive>
      </div>
    </template>
    
    <script>
    export default {
      name: 'App'
    }
    </script>
    
    <style>
    
    </style>

第二个问题就是在每次点击进去详情页的时候  页面都不会在顶部 滚动条会在不同页面上互相影响。 所以需要在router/index.js需要添加如下代码：

export default new Router({
      routes: [
        {
          path: '/',
          name: 'Home',
          component: Home
        }, {
          path: '/city',
          name: 'City',
          component: City
        },
        {
          path: '/detail/:id',
          name: 'Detail',
          component: Detail
        }
      ],
    // 这里添加
      scrollBehavior (to, from, savedPosition) {
        return { x: 0, y: 0 }
      }
    })

这样就搞定了。

详情查看：[https://cn.vuejs.org/v2/guide/routing.html][https_cn.vuejs.org_v2_guide_routing.html]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70]: /images/20220221/ddd2700f625f445bb9e21e8ffa4b222f.png
[https_cn.vuejs.org_v2_guide_routing.html]: https://cn.vuejs.org/v2/guide/routing.html