添加路由

package-lock.json

@@ -8034,6 +8034,11 @@
         "watchpack": "^2.4.0"
       }
     },
+    "vue-router": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-3.5.3.tgz",
+      "integrity": "sha512-FUlILrW3DGitS2h+Xaw8aRNvGTwtuaxrRkNSHWTizOfLUie7wuYwezeZ50iflRn8YPV5kxmU2LQuu3nM/b3Zsg=="
+    },
     "vue-style-loader": {
       "version": "4.1.3",
       "resolved": "https://registry.npmmirror.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz",

package.json

@@ -14,7 +14,8 @@
     "video.js": "^7.21.6",
     "videojs-contrib-hls": "^5.15.0",
     "videojs-contrib-quality-levels": "^2.2.1",
-    "vue": "^2.6.14"
+    "vue": "^2.6.14",
+    "vue-router": "^3.5.3"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",

src/App.vue

@@ -1,11 +1,21 @@
 <template>
   <div id="app">
-    <header class="app-header">
-      <h1>FLV 视频播放器</h1>
-    </header>
-    <main>
-      <VideoPlayer />
+    <!-- 添加全局导航栏 -->
+    <nav class="global-nav">
+      <div class="nav-container">
+        FLV 视频播放器
+        <div class="nav-links">
+          <router-link to="/" exact class="nav-link">首页</router-link>
+          <router-link to="/player" class="nav-link">播放器</router-link>
+          <router-link to="/about" class="nav-link">关于我们</router-link>
+        </div>
+      </div>
+    </nav>
+
+    <main class="main-content">
+      <router-view />
     </main>
+    
     <footer class="app-footer">
       <p>基于 Vue.js 和 flv.js 构建的 Material Design 风格视频播放器</p>
     </footer>
@@ -13,13 +23,8 @@
 </template>
 
 <script>
-import VideoPlayer from './components/VideoPlayer.vue'
-
 export default {
-  name: 'App',
-  components: {
-    VideoPlayer
-  }
+  name: 'App'
 }
 </script>
 
@@ -36,55 +41,95 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
+}
+
+/* 全局导航栏样式 */
+.global-nav {
+  background-color: #1976d2;
+  color: white;
+  padding: 0;
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.nav-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   max-width: 1200px;
   margin: 0 auto;
-  padding: 20px;
+  padding: 0 20px;
+  height: 60px;
 }
 
-.app-header {
-  margin-bottom: 20px;
+.nav-logo {
+  font-size: 20px;
+  font-weight: bold;
+  color: white;
+  text-decoration: none;
 }
 
-.logo {
-  height: 80px;
-  margin-bottom: 10px;
+.nav-links {
+  display: flex;
 }
 
-h1 {
-  font-size: 32px;
-  font-weight: 600;
-  margin: 10px 0;
-  color: #1d1d1f;
+.nav-link {
+  color: white;
+  text-decoration: none;
+  margin-left: 20px;
+  padding: 5px 10px;
+  border-radius: 4px;
+  transition: background-color 0.3s;
 }
 
-.tips-container {
-  margin-bottom: 20px;
-  padding: 12px 16px;
-  background-color: #e3f2fd;
-  border-radius: 8px;
-  text-align: left;
+.nav-link:hover {
+  background-color: rgba(255, 255, 255, 0.1);
 }
 
-.tip-item {
-  display: flex;
-  align-items: center;
+/* 修改选中样式，使用 router-link-exact-active 替代或配合 router-link-active */
+.router-link-exact-active {
+  background-color: rgba(255, 255, 255, 0.2);
+  font-weight: 500;
 }
 
-.tip-icon {
-  margin-right: 10px;
-  font-style: normal;
+/* 可以保留原来的样式，但调整权重较低 */
+.router-link-active:not(.router-link-exact-active) {
+  color: rgba(255, 255, 255, 0.9);
 }
 
-main {
-  background-color: white;
-  border-radius: 8px;
-  padding: 30px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
+/* 主内容区域 */
+.main-content {
+  max-width: 1200px;
+  margin: 20px auto;
+  padding: 0 20px;
 }
 
 .app-footer {
   margin-top: 30px;
+  padding: 20px;
   font-size: 14px;
   color: #86868b;
+  text-align: center;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .nav-container {
+    flex-direction: column;
+    height: auto;
+    padding: 10px;
+  }
+  
+  .nav-links {
+    margin-top: 10px;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+  
+  .nav-link {
+    margin: 5px;
+  }
 }
 </style>

src/main.js

@@ -1,8 +1,10 @@
 import Vue from 'vue'
 import App from './App.vue'
+import router from './router'
 
 Vue.config.productionTip = false
 
 new Vue({
+  router,
   render: h => h(App),
 }).$mount('#app')

src/router/index.js

@@ -0,0 +1,32 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import HomePage from '@/views/HomePage.vue'
+
+Vue.use(VueRouter)
+
+const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    component: HomePage
+  },
+  {
+    path: '/about',
+    name: 'About',
+    // 路由懒加载
+    component: () => import(/* webpackChunkName: "about" */ '@/views/AboutPage.vue')
+  },
+  {
+    path: '/player',
+    name: 'Player',
+    component: () => import(/* webpackChunkName: "player" */ '@/views/PlayerPage.vue')
+  }
+]
+
+const router = new VueRouter({
+  mode: 'history',
+  base: process.env.BASE_URL,
+  routes
+})
+
+export default router

src/views/AboutPage.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="about-page">
+    <header class="page-header">
+      <h1>关于我们</h1>
+    </header>
+    <main class="page-content">
+      <div class="about-content">
+        <h2>FLV 视频播放器项目</h2>
+        <p>这是一个基于 Vue.js 和 flv.js 构建的视频播放器，支持多种视频格式的在线播放。</p>
+        <p>主要特点：</p>
+        <ul>
+          <li>支持 FLV 格式视频播放</li>
+          <li>支持 HLS 格式视频播放</li>
+          <li>提供软件解码选项</li>
+          <li>响应式设计，适配各种设备</li>
+        </ul>
+      </div>
+    </main>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AboutPage'
+}
+</script>
+
+<style scoped>
+.about-page {
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.page-header {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+h1 {
+  font-size: 32px;
+  font-weight: 600;
+  margin: 10px 0;
+  color: #1d1d1f;
+}
+
+.page-content {
+  background-color: white;
+  border-radius: 8px;
+  padding: 30px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
+}
+
+.about-content {
+  text-align: left;
+}
+
+h2 {
+  color: #333;
+  margin-bottom: 20px;
+}
+
+ul {
+  padding-left: 20px;
+}
+
+li {
+  margin-bottom: 8px;
+}
+</style>

src/views/HomePage.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="home-page">
+    <header class="page-header">
+      <h1>FLV 视频播放器</h1>
+      <p class="description">基于 Vue.js 和 flv.js 构建的视频播放器</p>
+    </header>
+    <main class="page-content">
+      <VideoPlayer />
+    </main>
+    <footer class="page-footer">
+      <p>基于 Vue.js 和 flv.js 构建的 Material Design 风格视频播放器</p>
+    </footer>
+  </div>
+</template>
+
+<script>
+import VideoPlayer from '@/components/VideoPlayer.vue'
+
+export default {
+  name: 'HomePage',
+  components: {
+    VideoPlayer
+  }
+}
+</script>
+
+<style scoped>
+.home-page {
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.page-header {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+h1 {
+  font-size: 32px;
+  font-weight: 600;
+  margin: 10px 0;
+  color: #1d1d1f;
+}
+
+.description {
+  font-size: 16px;
+  color: #666;
+  margin-top: 8px;
+}
+
+.page-content {
+  background-color: white;
+  border-radius: 8px;
+  padding: 30px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
+}
+
+.page-footer {
+  margin-top: 30px;
+  text-align: center;
+  font-size: 14px;
+  color: #86868b;
+}
+</style>

src/views/PlayerPage.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="player-page">
+    <main class="page-content">
+      <VideoPlayer />
+    </main>
+  </div>
+</template>
+
+<script>
+import VideoPlayer from '@/components/VideoPlayer.vue'
+
+export default {
+  name: 'PlayerPage',
+  components: {
+    VideoPlayer
+  }
+}
+</script>
+
+<style scoped>
+.player-page {
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.page-header {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+h1 {
+  font-size: 32px;
+  font-weight: 600;
+  margin: 10px 0;
+  color: #1d1d1f;
+}
+
+.page-content {
+  background-color: white;
+  border-radius: 8px;
+  padding: 30px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
+}
+</style>