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

最新推荐文章于 2023-10-11 22:07:18 发布

wpdzzzzz

最新推荐文章于 2023-10-11 22:07:18 发布

阅读量426

点赞数

分类专栏：学习文章标签： vue

本文链接：https://blog.csdn.net/qq_42497807/article/details/87995503

版权

学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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