一、Vue Router里咋基础嵌入YouTube视频？

terry 6个月前 (07-11) 阅读数 193 #Vue

不少做Vue项目的同学好奇,怎么把Vue Router和YouTube结合起来做视频类应用？比如做个带路由的视频网站，或者在单页应用里嵌入YouTube视频还能通过路由控制页面？这篇内容就从基础嵌入、动态传参、API交互到优化问题，一步步拆解咋把这俩玩意儿玩起来～

想在Vue项目里放个YouTube视频,最直接的方式是用<iframe>嵌入，但要让不同视频页面由Vue Router控制，得先规划路由结构。

写个“视频页面”组件

先创建一个<VideoPage>组件，用<iframe>承载YouTube视频，代码大概长这样：

<template>
  <div class="video-container">
    <!-- 替换成你要嵌入的YouTube视频ID -->
    <iframe 
      src="https://www.youtube.com/embed/你的视频ID" 
      frameborder="0" 
      allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
      allowfullscreen
      class="video-iframe"
    ></iframe>
  </div>
</template>
<script>
export default {
  name: 'VideoPage'
}
</script>
<style scoped>
.video-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto; /* 让容器居中 */
}
.video-iframe {
  width: 100%;
  height: calc(100% / 16 * 9); /* 保持16:9的视频比例 */
}
</style>

配置Vue Router路由规则

在router/index.js里给这个组件分配路由：

import Vue from 'vue'
import Router from 'vue-router'
import VideoPage from '@/components/VideoPage' // 组件路径根据实际调整
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/video', // 访问/video时显示VideoPage
      name: 'VideoPage',
      component: VideoPage
    }
  ]
})

这样访问http://你的域名/video，就能看到嵌入的YouTube视频了，但如果要做“点击不同视频跳转到对应页面”，就得用动态路由传参。

动态路由传参，不同视频用路由控制

比如做个“视频列表页”，点列表项跳转到/video/视频ID页面，显示对应YouTube视频，这时候得让路由“动态”起来。

配置动态路由

修改router/index.js，给路由加动态参数:videoId：

routes: [
  {
    path: '/video/:videoId', // 动态参数，video/abc123
    name: 'VideoDetail',
    // 异步加载组件，访问时才加载代码，优化首屏速度
    component: () => import('@/components/VideoDetail') 
  }
]

写“视频详情”组件

创建<VideoDetail>组件，从路由参数里拿videoId，渲染对应视频：

<template>
  <div class="video-container">
    <iframe 
      :src="`https://www.youtube.com/embed/${videoId}`" 
      frameborder="0" 
      allowfullscreen
      class="video-iframe"
    ></iframe>
    <p>当前播放视频ID：{{ videoId }}</p>
  </div>
</template>
<script>
export default {
  name: 'VideoDetail',
  data() {
    return {
      videoId: ''
    }
  },
  created() {
    // 路由初始化时，从$route.params拿视频ID
    this.videoId = this.$route.params.videoId
  },
  watch: {
    // 路由参数变化时（比如同页面切换视频），更新videoId
    '$route.params.videoId'(newId) {
      this.videoId = newId
    }
  }
}
</script>

列表页跳转逻辑

再写个<VideoList>组件，做视频列表和跳转：

<template>
  <div class="video-list">
    <div 
      v-for="item in videoList" 
      :key="item.id" 
      @click="goToVideo(item.id)"
      class="video-item"
    >
      <img :src="item.thumbnail" alt="视频封面">
      <p>{{ item.title }}</p>
    </div>
  </div>
</template>
<script>
export default {
  name: 'VideoList',
  data() {
    return {
      videoList: [
        { id: 'abc123', title: 'Vue Router教程', thumbnail: '封面图链接' },
        { id: 'def456', title: 'YouTube嵌入技巧', thumbnail: '封面图链接' }
      ]
    }
  },
  methods: {
    goToVideo(videoId) {
      // 跳转到带参数的路由
      this.$router.push({ name: 'VideoDetail', params: { videoId } })
    }
  }
}
</script>

这样点列表项,路由就会跳转到/video/视频ID，页面自动渲染对应视频——这就是动态路由传参的核心逻辑。

结合YouTube API，给视频加交互功能

YouTube提供了iframe API，能实现“播放/暂停/获取时长/监听状态”等功能，在Vue Router控制的页面里，得结合Vue的生命周期和路由守卫来玩。

加载YouTube API脚本

先把API脚本引入项目,可以直接在index.html里加：

<script src="https://www.youtube.com/iframe_api"></script>

也可以在组件mounted里动态加载（避免阻塞首屏）：

mounted() {
  const script = document.createElement('script')
  script.src = 'https://www.youtube.com/iframe_api'
  document.body.appendChild(script)
  script.onload = () => {
    this.initPlayer() // API加载完后初始化播放器
  }
}

初始化YouTube播放器

在<VideoDetail>组件里，用API创建播放器实例：

<template>
  <div class="video-container">
    <div id="player"></div> <!-- 播放器容器 -->
    <button @click="playVideo">播放</button>
    <button @click="pauseVideo">暂停</button>
  </div>
</template>
<script>
export default {
  name: 'VideoDetail',
  data() {
    return {
      player: null,
      videoId: this.$route.params.videoId
    }
  },
  mounted() {
    // 等YouTube API全局变量YT加载好
    window.onYouTubeIframeAPIReady = () => {
      this.initPlayer()
    }
  },
  methods: {
    initPlayer() {
      this.player = new YT.Player('player', {
        videoId: this.videoId,
        height: '360',
        width: '640',
        events: {
          onReady: this.onPlayerReady, // 播放器就绪时触发
          onStateChange: this.onPlayerStateChange // 状态变化时触发
        }
      })
    },
    onPlayerReady(event) {
      event.target.playVideo() // 就绪后自动播放（可选）
    },
    onPlayerStateChange(event) {
      console.log('视频状态变化：', event.data) // 打印状态（比如播放、暂停）
    },
    playVideo() {
      this.player.playVideo() // 自定义播放按钮
    },
    pauseVideo() {
      this.player.pauseVideo() // 自定义暂停按钮
    }
  },
  beforeDestroy() {
    // 组件销毁前，销毁YouTube播放器（避免内存泄漏）
    if (this.player) {
      this.player.destroy()
    }
  }
}
</script>

路由切换时控制视频状态

比如用户从/video/abc123跳到/video/def456，离开前要暂停视频，用路由守卫beforeRouteLeave：

beforeRouteLeave(to, from, next) {
  if (this.player) {
    this.player.pauseVideo() // 离开页面时暂停视频
  }
  next() // 继续跳转
}

这样结合API和路由,就能实现“播放控制、状态监听、路由切换暂停”等灵活功能。

SEO和性能优化，让项目更“健康”

单页应用（SPA）默认是客户端渲染，搜索引擎可能爬不到内容；视频页面加载慢也影响体验，得针对性优化。

SEO优化：预渲染或服务端渲染（SSR）

预渲染（Prerender）：用prerender-spa-plugin在构建时生成静态HTML，配置webpack：

const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
module.exports = {
  configureWebpack: () => {
    if (process.env.NODE_ENV === 'production') {
      return {
        plugins: [
          new PrerenderSPAPlugin({
            staticDir: path.join(__dirname, 'dist'),
            routes: ['/', '/video/abc123', '/video/def456'], // 要预渲染的路由
            renderer: new Renderer({
              headless: true,
              renderAfterDocumentEvent: 'render-event' // 和Vue生命周期配合
            })
          })
        ]
      }
    }
  }
}

然后在main.js里触发渲染完成事件：

new Vue({
  router,
  render: h => h(App),
  mounted() {
    document.dispatchEvent(new Event('render-event'))
  }
}).$mount('#app')

服务端渲染（SSR）：用Nuxt.js（基于Vue Router的SSR框架），Nuxt会自动处理路由，视频页面写在pages/video/_videoId.vue，服务端渲染后再返回给客户端，对SEO更友好。

性能优化：懒加载+iframe懒加载

路由懒加载：前面动态路由用的() => import()就是异步加载，只有访问到该路由时才加载组件代码，减少首屏体积。

YouTube iframe懒加载：默认<iframe>一加载就请求YouTube资源，影响速度，可以改成“用户点击后再加载”：

<template>
  <div class="video-container">
    <button v-if="!isIframeLoaded" @click="loadIframe">点击加载视频</button>
    <iframe 
      v-else
      :src="`https://www.youtube.com/embed/${videoId}`" 
      frameborder="0" 
      allowfullscreen
      class="video-iframe"
    ></iframe>
  </div>
</template>
<script>
export default {
  data() {
    return {
      videoId: this.$route.params.videoId,
      isIframeLoaded: false
    }
  },
  methods: {
    loadIframe() {
      this.isIframeLoaded = true
    }
  }
}
</script>

移动端适配

手机上视频显示变形？用CSS保持16:9比例：

/* 现代浏览器用aspect-ratio */
.video-iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}
/* 兼容旧浏览器用padding-top技巧 */
.video-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 9/16=56.25% */
}
.video-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

常见问题：路由切换后视频还在响？页面适配不对？

路由切换后视频声音还在播放

原因：旧组件的<iframe>没销毁，视频继续播放，解决方法：用v-if控制<iframe>销毁，或在组件销毁前暂停视频。

示例（用v-if）：

<iframe 
  v-if="isComponentActive"
  :src="`https://www.youtube.com/embed/${videoId}`" 
  ...
></iframe>

data() { return { isComponentActive: true } },
beforeDestroy() {
  this.isComponentActive = false // 销毁iframe
}

动态路由参数变化，视频没更新

因为Vue Router会复用组件（同一路由不同参数），created钩子不会重复执行，得用watch监听路由参数：

watch: {
  '$route.params.videoId'(newId) {
    this.videoId = newId
    // 如果用了YouTube API，还要销毁旧播放器，重新初始化
    if (this.player) {
      this.player.destroy()
    }
    this.initPlayer()
  }
}

移动端视频显示不全或变形

检查CSS是否用了aspect-ratio或padding-top技巧，确保视频容器比例为16:9。

YouTube API加载失败

确保API脚本加载顺序正确（比如先加载脚本再初始化播放器），或在组件mounted里动态加载并处理onload事件。

把Vue Router和YouTube玩出花，得抓这几点

想在Vue项目里用Vue Router整合YouTube，核心是“路由控制页面结构 + 动态传参渲染内容 + API扩展交互 + 优化用户和搜索体验”，从基础嵌入到动态路由，再到API交互和性能SEO，每一步都得结合Vue的响应式、生命周期，还有YouTube自身的嵌入规则和API文档。

实际项目里,还能拓展更多玩法：比如用Vuex存播放历史、做播放列表切换、结合YouTube Data API拉取视频详情/评论（需后端代理，因为API有密钥限制）。

把路由的“导航”能力和YouTube的“内容”能力结合，思路打开后，做视频类应用、课程平台、自媒体站点都能更顺手～

版权声明

本文仅代表作者观点，不代表Code前端网立场。
本文系作者Code前端网发表，如需转载，请注明页面地址。

上一篇：先搞懂，Yarn和Vue Router各自是干啥的？下一篇：一、Vue Router 4 基础认知，和前代有啥不同？