vue.js - VideoJS Player 似乎打破了 Vue-Router-3？

Question

加载VideoJS 组件时，我的 Vue 应用程序顶部的导航路由已断开链接

预期功能 路由适用于组件

我试过的如果VideoFeed.vue 上的视频标签被删除，那么链接将再次可点击

代码 App.Vue

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link> |
     <router-link to="/queue-video-job">Queue Video Job</router-link> |
    <router-link to="/queue-style-job">Queue Style Job</router-link> |
    <router-link to="/asset-grid">View Asset Table</router-link> |
    <router-link to="/image-feed">Image Feed</router-link> |
    <router-link to="/submit-video">Upload Video</router-link> |
    <router-link to="/submit-image">Upload Image</router-link> |
    <router-link to="/submit-audio">Upload Audio</router-link> |
    <router-link to="/video-feed">Video Feed</router-link>
  </div>
  <router-view/>
</template>

路由器/index.js

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
{
    path: '/video-feed',
    name: 'Videos',
    component: () => import('../views/VideoFeed.vue')
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

VideoFeed.vue

    <div>
        <video ref="videoPlayer" class="video-js"></video>
    </div>
</template>

<script>
import videojs from 'video.js';

export default {
    name: "VideoPlayer",
    props: {
        options: {
            type: Object,
            default() {
                return {};
            }
        }
    },
    data() {

    },
    mounted() {
        this.player = videojs(this.$refs.videoPlayer, this.options, function onPlayerReady() {
            console.log('onPlayerReady', this);
        })
    },
    beforeDestroy() {
        if (this.player) {
            this.player.dispose()
        }
    }
}
</script>

标签： vue.jsvue-routervuejs3video.js