1.完成情况

• 动态路由设置
• 公用图片画廊
• 使用递归组件进行开发
• 动态获得详情页数据
• 基础动画

2.重点以及特殊问题记录

1.动态路由设置
在路由后面+：元素即可绑定动态路径后的值，在进入相应网页路径后，可以将路径后的对应值绑定到对应路径，元素可以进行全局绑定，在使用axios获取数据时可以使用绑定的元素，获取相应的数据

    <ul>
      <router-link
        tag="li"
        class="item border-bottom"
        v-for="item of list"
        :key="item.id"
        :to="'/detail/' + item.id"  //+后面的数据可以与路由配置的 id进行绑定
      >
        <img class="item-img" :src="item.imgUrl" />
        <div class="item-info">
          <p class="item-title">{{item.title}}</p>
          <p class="item-desc">{{item.desc}}</p>
          <button class="item-button">查看详情</button>
        </div>
      </router-link>
    </ul>

  {
    path: '/detail/:id',//id即为绑定的元素
    name: 'Detail',
    component: Detail
  }]

      axios.get('/api/detail.json', {
        params: {
          id: this.$route.params.id //id即为绑定的元素传入的数值
        }
      }).then(this.handleGetDataSucc)
    },

2.画廊框分页位置设置
点击后进入画廊框，为了有左右翻页功能，依然采用了swiper的插件，在官网了解了pagination的配置项，使用fraction分式进行配置

  data () {
    return {
      swiperOptions: {
        pagination: '.swiper-pagination',
        paginationType: 'fraction',
        observeParents: true,
        observer: true
      }
    }
  },

3.递归组件
在组件中再调用组件进行子显示，在组件中对组件进行命名采用name：的形式进行命名，这样可以在组件本身内再次调用组件

<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-chilren">
        <detail-list :list="item.children"></detail-list>
      </div>
    </div>
  </div>
</template>

export default {
  name: 'DetailList',  //命名
  props: {
    list: Array
  }
}

5.解决缓存后无法发送新的请求
前面采用了keep-alive对页面进行了缓存，所以添加exclude添加组件名字，即可不进行缓存。

6.添加动画
使用插槽进行动画插入，现在组件中预留一个插槽，再将动画组件包裹住所需要添加动画的元素即可。

<template>
  <transition>
    <slot></slot>
  </transition>
</template>

<script>
export default {
  name: 'FadeAnimation'
}
</script>

<style lang="stylus" scoped>
  .v-enter, .v-leave-to
    opacity: 0
  .v-enter-active, .v-leave-active
    transition: opacity .5s
</style>

使用插槽

    <fade-animation>
      <common-gallary
        :imgs="bannerImgs"
        v-show="showGallary"
        @close="handleGallaryClose"
      ></common-gallary>
    </fade-animation>
  </div>
</template>

<script>
import CommonGallary from '@/common/gallary/Gallary'
import FadeAnimation from '@/common/fade/FadeAnimation'

7.在使用router-to的时候会导致原标签的css失效，可以采用tag属性转换成相应的标签即可