Vue开发学习-周报5-详情页开发

本文总结了Vue开发中动态路由的设置,包括如何绑定动态路径获取数据。此外,还介绍了画廊分页的实现,利用swiper插件的fraction配置。递归组件的使用以及如何在组件内部调用自身。解决了keep-alive导致的新请求问题,并讨论了如何添加动画,通过插槽插入动画组件。最后提到了router-link导致CSS失效的问题,解决方案是使用tag属性转换标签。
摘要由CSDN通过智能技术生成

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属性转换成相应的标签即可

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值