feat: 添加页面标题动态设置功能

使用@vueuse/core的useTitle方法动态设置页面标题，并更新路由元信息中的标题为中文

feat: 添加页面标题动态设置功能
使用@vueuse/core的useTitle方法动态设置页面标题，并更新路由元信息中的标题为中文
hookehuyr
Commit 05c6ee925eae384ed943e0203fb8a2aa7f2b6319 05c6ee92 1 parent cbbb6355
Showing 12 changed files with 100 additions and 22 deletions
package-lock.json
package.json
src/router/index.js
src/views/HomePage.vue
src/views/activities/ActivitiesPage.vue
src/views/activities/ActivityDetailPage.vue
src/views/auth/LoginPage.vue
src/views/auth/RegisterPage.vue
src/views/checkout/CheckoutPage.vue
src/views/courses/CourseDetailPage.vue
src/views/courses/CoursesPage.vue
src/views/profile/ProfilePage.vue
--- a/package-lock.json
View file @05c6ee9
+++ b/package-lock.json
View file @05c6ee9
@@ -16,6 +16,7 @@
       "devDependencies": {
         "@vitejs/plugin-vue": "^5.2.1",
         "@vitejs/plugin-vue-jsx": "^4.1.2",
+        "@vueuse/core": "^13.0.0",
         "autoprefixer": "^10.4.19",
         "postcss": "^8.4.35",
         "tailwindcss": "^3.4.1",
@@ -1175,6 +1176,12 @@
       "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
       "dev": true
     },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.21",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
+      "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==",
+      "dev": true
+    },
     "node_modules/@vant/popperjs": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@vant/popperjs/-/popperjs-1.3.0.tgz",
@@ -1392,6 +1399,44 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.13.tgz",
       "integrity": "sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ=="
     },
+    "node_modules/@vueuse/core": {
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-13.0.0.tgz",
+      "integrity": "sha512-rkgb4a8/0b234lMGCT29WkCjPfsX0oxrIRR7FDndRoW3FsaC9NBzefXg/9TLhAgwM11f49XnutshM4LzJBrQ5g==",
+      "dev": true,
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.21",
+        "@vueuse/metadata": "13.0.0",
+        "@vueuse/shared": "13.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-13.0.0.tgz",
+      "integrity": "sha512-TRNksqmvtvqsuHf7bbgH9OSXEV2b6+M3BSN4LR5oxWKykOFT9gV78+C2/0++Pq9KCp9KQ1OQDPvGlWNQpOb2Mw==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-13.0.0.tgz",
+      "integrity": "sha512-9MiHhAPw+sqCF/RLo8V6HsjRqEdNEWVpDLm2WBRW2G/kSQjb8X901sozXpSCaeLG0f7TEfMrT4XNaA5m1ez7Dg==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
     "node_modules/ansi-regex": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
--- a/package.json
View file @05c6ee9
+++ b/package.json
View file @05c6ee9
@@ -17,6 +17,7 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.1",
     "@vitejs/plugin-vue-jsx": "^4.1.2",
+    "@vueuse/core": "^13.0.0",
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.35",
     "tailwindcss": "^3.4.1",
--- a/src/router/index.js
View file @05c6ee9
+++ b/src/router/index.js
View file @05c6ee9
@@ -12,57 +12,57 @@ const routes = [
     path: '/',
     name: 'HomePage',
     component: () => import('../views/HomePage.vue'),
-    meta: { title: 'HomePage' },
+    meta: { title: '首页' },
   },
   {
     path: '/courses',
     name: 'Courses',
     component: () => import('../views/courses/CoursesPage.vue'),
-    meta: { title: 'Courses' },
+    meta: { title: '课程列表' },
   },
   {
     path: '/courses/:id',
     name: 'CourseDetail',
     component: () => import('../views/courses/CourseDetailPage.vue'),
-    meta: { title: 'CourseDetail' },
+    meta: { title: '课程详情' },
   },
   {
     path: '/profile',
     name: 'Profile',
     component: () => import('../views/profile/ProfilePage.vue'),
-    meta: { title: 'Profile' },
+    meta: { title: '个人中心' },
   },
   {
     path: '/login',
     name: 'Login',
     component: () => import('../views/auth/LoginPage.vue'),
-    meta: { title: 'Login' }
+    meta: { title: '登录' }
   },
   {
     path: '/register',
     name: 'Register',
     component: () => import('../views/auth/RegisterPage.vue'),
-    meta: { title: 'Register' }
+    meta: { title: '注册' }
   },
   {
     path: '/activities',
     name: 'Activities',
     component: () => import('../views/activities/ActivitiesPage.vue'),
-    meta: { title: 'Activities' }
+    meta: { title: '活动列表' }
   },
   {
     path: '/activities/:id',
     name: 'ActivityDetail',
     component: () => import('../views/activities/ActivityDetailPage.vue'),
     props: true,
-    meta: { title: 'Home' }
+    meta: { title: '活动详情' }
   },
   {
     path: '/checkout',
     name: 'CheckoutPage',
     component: () => import('../views/checkout/CheckoutPage.vue'),
     props: true,
-    meta: { title: 'Home' }
+    meta: { title: '结账' }
   },
 ]
--- a/src/views/HomePage.vue
View file @05c6ee9
+++ b/src/views/HomePage.vue
View file @05c6ee9
 <!--
  * @Date: 2025-03-20 19:55:21
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-03-20 22:39:23
+ * @LastEditTime: 2025-03-20 23:13:20
  * @FilePath: /mlaj/src/views/HomePage.vue
  * @Description: 文件描述
 -->
@@ -450,6 +450,7 @@
 <script setup lang="jsx">
 import { ref, onMounted, onUnmounted, defineComponent, h } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import AppLayout from '@/components/layout/AppLayout.vue'
 import FrostedGlass from '@/components/ui/FrostedGlass.vue'
 import CourseCard from '@/components/ui/CourseCard.vue'
@@ -457,6 +458,11 @@ import LiveStreamCard from '@/components/ui/LiveStreamCard.vue'
 import ActivityCard from '@/components/ui/ActivityCard.vue'
 import SummerCampCard from '@/components/ui/SummerCampCard.vue'
 import { courses, liveStreams, activities, checkInTypes, userRecommendations } from '@/utils/mockData'
+import { useTitle } from '@vueuse/core';
+
+const $route = useRoute();
+const $router = useRouter();
+useTitle($route.meta.title);
 // 响应式状态
 const activeTab = ref('推荐')
--- a/src/views/activities/ActivitiesPage.vue
View file @05c6ee9
+++ b/src/views/activities/ActivitiesPage.vue
View file @05c6ee9
@@ -149,10 +149,14 @@
 <script setup>
 import { ref, computed, defineComponent, h } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import AppLayout from '@/components/layout/AppLayout.vue'
 import ActivityCard from '@/components/ui/ActivityCard.vue'
 import { activities } from '@/utils/mockData'
-
+import { useTitle } from '@vueuse/core';
+const $route = useRoute();
+const $router = useRouter();
+useTitle($route.meta.title);
 // 响应式状态
 const activeFilter = ref('全部')
 const locationFilter = ref('')
--- a/src/views/activities/ActivityDetailPage.vue
View file @05c6ee9
+++ b/src/views/activities/ActivityDetailPage.vue
View file @05c6ee9
@@ -4,7 +4,10 @@ import { useRoute, useRouter } from "vue-router";
 import AppLayout from "@/components/layout/AppLayout.vue";
 import FrostedGlass from "@/components/ui/FrostedGlass.vue";
 import { activities } from "@/utils/mockData";
-
+import { useTitle } from '@vueuse/core';
+const $route = useRoute();
+const $router = useRouter();
+useTitle($route.meta.title);
 const route = useRoute();
 const router = useRouter();
 const activity = ref(null);
--- a/src/views/auth/LoginPage.vue
View file @05c6ee9
+++ b/src/views/auth/LoginPage.vue
View file @05c6ee9
@@ -123,10 +123,13 @@
 <script setup>
 import { ref } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import FrostedGlass from '@/components/ui/FrostedGlass.vue'
 import { useAuth } from '@/contexts/auth'
-
+import { useTitle } from '@vueuse/core';
+const $route = useRoute();
+const $router = useRouter();
+useTitle($route.meta.title);
 const router = useRouter()
 const { login } = useAuth()
--- a/src/views/auth/RegisterPage.vue
View file @05c6ee9
+++ b/src/views/auth/RegisterPage.vue
View file @05c6ee9
@@ -152,10 +152,13 @@
 <script setup>
 import { ref, reactive } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import FrostedGlass from '@/components/ui/FrostedGlass.vue'
 import { useAuth } from '@/contexts/auth'
-
+import { useTitle } from '@vueuse/core';
+const $route = useRoute();
+const $router = useRouter();
+useTitle($route.meta.title);
 const router = useRouter()
 const { login } = useAuth()
--- a/src/views/checkout/CheckoutPage.vue
View file @05c6ee9
+++ b/src/views/checkout/CheckoutPage.vue
View file @05c6ee9
@@ -267,12 +267,15 @@
 <script setup>
 import { ref } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import AppLayout from '@/components/layout/AppLayout.vue'
 import FrostedGlass from '@/components/ui/FrostedGlass.vue'
 import ConfirmDialog from '@/components/ui/ConfirmDialog.vue'
 import { useCart } from '@/contexts/cart'
-
+import { useTitle } from '@vueuse/core';
+const $route = useRoute();
+const $router = useRouter();
+useTitle($route.meta.title);
 const router = useRouter()
 const { items: cartItems, getTotalPrice, handleCheckout, clearCart, removeFromCart } = useCart()
--- a/src/views/courses/CourseDetailPage.vue
View file @05c6ee9
+++ b/src/views/courses/CourseDetailPage.vue
View file @05c6ee9
@@ -260,7 +260,10 @@ import AppLayout from '@/components/layout/AppLayout.vue'
 import FrostedGlass from '@/components/ui/FrostedGlass.vue'
 import { courses } from '@/utils/mockData'
 import { useCart } from '@/contexts/cart'
-
+import { useTitle } from '@vueuse/core';
+const $route = useRoute();
+const $router = useRouter();
+useTitle($route.meta.title);
 const route = useRoute()
 const router = useRouter()
 const course = ref(null)
--- a/src/views/courses/CoursesPage.vue
View file @05c6ee9
+++ b/src/views/courses/CoursesPage.vue
View file @05c6ee9
@@ -82,13 +82,17 @@
 <script setup lang="jsx">
 import { computed, defineComponent, h } from "vue";
+import { useRoute, useRouter } from 'vue-router'
 import AppLayout from "@/components/layout/AppLayout.vue";
 import SearchBar from "@/components/ui/SearchBar.vue";
 import FrostedGlass from "@/components/ui/FrostedGlass.vue";
 import CourseCard from "@/components/ui/CourseCard.vue";
 import LiveStreamCard from "@/components/ui/LiveStreamCard.vue";
 import { featuredCourse, liveStreams, courses } from "@/utils/mockData";
-
+import { useTitle } from '@vueuse/core';
+const $route = useRoute();
+const $router = useRouter();
+useTitle($route.meta.title);
 // Search handler
 const handleSearch = (query) => {
   console.log("Searching for:", query);
--- a/src/views/profile/ProfilePage.vue
View file @05c6ee9
+++ b/src/views/profile/ProfilePage.vue
View file @05c6ee9
@@ -128,14 +128,17 @@
 <script setup>
 import { ref, h } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import AppLayout from '@/components/layout/AppLayout.vue'
 import FrostedGlass from '@/components/ui/FrostedGlass.vue'
 import MenuItem from '@/components/ui/MenuItem.vue'
 import { useAuth } from '@/contexts/auth'
 import { userProfile, checkInTypes } from '@/utils/mockData'
-
+import { useTitle } from '@vueuse/core';
 const router = useRouter()
+const $route = useRoute();
+const $router = useRouter();
+useTitle($route.meta.title);
 const { currentUser, logout } = useAuth()
 const profile = ref(userProfile)