vue.js项目实战运用篇之抖音视频APP-第五节：视频播放列表组件功能

【温馨提示】：若想了解更多关于本次项目实战内容，可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划。

【项目地址】
项目采用Git进行管理，最终项目将会发布到GitHub中，感兴趣的小伙伴们可以一起学习，共同完善本项目。
项目地址：GitHub

---

第五节：视频播放列表组件功能

vue-awesome-swiper介绍

众所周知的图片轮播插件swiper,快速，简单，高效，稳定。不过最新的swiper6对vue的兼容却不如人意。那么我们怎么解决这一问题呢？可使用第三轮播插件，运用JavaScript编写的兼容vue轮播插件。
详细内容：vue-awesome-swiper
项目地址：vue-awesome-swiper

vue-video-player介绍

vue中的视频播放插件。
项目地址：vue-video-player

在项目中安装配置插件

1.安装vue-awesome-swiper
【命令】：

npm install swiper vue-awesome-swiper

2.vue-video-player安装
【命令】：

npm install vue-video-player 

3.引入并注册插件
在main.js文件中引入安装好的插件文件，代码如下：

// 滑动特效插件
import VueSwiper from 'vue-awesome-swiper';
//import 'swiper/css/swiper.css';
import 'swiper/swiper-bundle.css';
// 视频播放插件
import VueVideoPlayer from 'vue-video-player';
import 'video.js/dist/video-js.css';
//注册
Vue.use(VueSwiper);
Vue.use(VueVideoPlayer);

【温馨提示】
1.引入以上插件文件需在App.vue前引入，可能会报错。
2.旧版本的Swiper样式为：import ‘swiper/css/swiper.css’;若引入旧版本的swiper可能会报错，将其替换为import ‘swiper/swiper-bundle.css’;即可。

4.配置路由
视频列表是在首页的关注和推荐两个页面中的内容，所以我们需要在这两个页面添加视频列表子路由。
路径：src/router/index.js。
配置代码如下：

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';

Vue.use(VueRouter);

const routes = [
  {
   
    path: '/',
    redirect: '/index/recommend/', // app打开之后 默认跳转到首页的推荐标签栏
  },
  {
   
    path: '/index',
    redirect: '/index/recommend/', // app打开之后 默认跳转到首页的推荐标签栏
  },
  {
   
    path: '/',
    name: 'Home',
    component: Home,
    children: [
      {
   
        path: '/index', // 首页页面路由
        name: 'index',
        component: () => import(/* webpackChunkName: "Index" */ '../views/index/Index.vue'),
        children: [
          {
   
            path: 'follows', // 关注页面路由
            name: 'follows',
            component: () => import(/* webpackChunkName: "Follows" */ '../views/follow/Follows.vue'),
            children: [
              {
   
                path: 'reVidelList', // 视频页面路由
                name: 'reVidelList',
                component: () => import(/* webpackChunkName: "reVidelList" */ '../common/components/index/VideoList.vue'),
              },
            ],
          },
          {
   
            path: 'recommend', // 推荐页面路由
            name: 'recommend',
            component: () => import(/* webpackChunkName: "Recommend" */ '../views/recommend/Recommend.vue'),
            children: [
              {
   
                path: 'reVidelList', // 视频页面路由
                name: 'reVidelList',
                component: () => import(/* webpackChunkName: "reVidelList" */ '../common/components/index/VideoList.vue'),
              },
            ],
          },
        ],
      },
      {
   
        path: '/friends', // 朋友页面路由
        name: 'friends',
        component: () => import(/* webpackChunkName: "fllow" */ '../views/friends/Friends.vue'),
      },
      {
   
        path: '/news', // 消息页面路由
        name: 'news',
        component: () => import(/* webpackChunkName: "news" */ '../views/news/News.vue'),
      },
      {
   
        path: '/me', // 我的信息页面路由
        name: 'me',
        component: () => import(/* webpackChunkName: "me" */ '../views/me/Me.vue'),
      },
    ],
  },
  {
   
    path: