fix browser tab title(task 9)

hichina-main-front-mobile-first/src/router/index.js

@@ -1,30 +1,33 @@
-import { route } from 'quasar/wrappers'
-import { createRouter, createMemoryHistory, createWebHistory, createWebHashHistory } from 'vue-router'
-import routes from './routes'
-
-/*
- * If not building with SSR mode, you can
- * directly export the Router instantiation;
- *
- * The function below can be async too; either use
- * async/await or return a Promise which resolves
- * with the Router instance.
- */
+import { route } from "quasar/wrappers";
+import {
+  createRouter,
+  createMemoryHistory,
+  createWebHistory,
+  createWebHashHistory,
+} from "vue-router";
+import routes from "./routes";
 
 export default route(function (/* { store, ssrContext } */) {
   const createHistory = process.env.SERVER
     ? createMemoryHistory
-    : (process.env.VUE_ROUTER_MODE === 'history' ? createWebHistory : createWebHashHistory)
+    : process.env.VUE_ROUTER_MODE === "history"
+    ? createWebHistory
+    : createWebHashHistory;
 
   const Router = createRouter({
     scrollBehavior: () => ({ left: 0, top: 0 }),
     routes,
+    history: createHistory(
+      process.env.MODE === "ssr" ? void 0 : process.env.VUE_ROUTER_BASE
+    ),
+  });
 
-    // Leave this as is and make changes in quasar.conf.js instead!
-    // quasar.conf.js -> build -> vueRouterMode
-    // quasar.conf.js -> build -> publicPath
-    history: createHistory(process.env.MODE === 'ssr' ? void 0 : process.env.VUE_ROUTER_BASE)
-  })
+  // Add the beforeEach navigation guard here
+  Router.beforeEach((to, from, next) => {
+    const pageTitle = to.meta.title || "Default Title"; // Change 'Default Title' to your default title
+    document.title = pageTitle;
+    next();
+  });
 
-  return Router
-})
+  return Router;
+});

hichina-main-front-mobile-first/src/router/routes.js

@@ -2,145 +2,265 @@ const routes = [
   {
     path: "/",
     component: () => import("layouts/MainLayout.vue"),
-    children: [{ path: "", component: () => import("pages/IndexPage.vue") }],
+    children: [
+      {
+        path: "",
+        component: () => import("pages/IndexPage.vue"),
+        meta: { title: " HiChina Travel Home" },
+      },
+    ],
   },
   {
     path: "/guideintro",
     component: () => import("layouts/MainLayout.vue"),
     children: [
-      { path: "", component: () => import("pages/GuideIntroPage.vue") },
+      {
+        path: "",
+        component: () => import("pages/GuideIntroPage.vue"),
+        meta: { title: " HiChina Travel Guidebooks" },
+      },
     ],
   },
   {
     path: "/blog",
     component: () => import("layouts/MainLayout.vue"),
-    children: [{ path: "", component: () => import("pages/BlogPage.vue") }],
+    children: [
+      {
+        path: "",
+        component: () => import("pages/BlogPage.vue"),
+        meta: { title: " HiChina Travel Blog" },
+      },
+    ],
   },
   {
     path: "/product",
     component: () => import("layouts/MainLayout.vue"),
     children: [
-      { path: "", component: () => import("pages/TravelShopPage.vue") },
+      {
+        path: "",
+        component: () => import("pages/TravelShopPage.vue"),
+        meta: { title: " HiChina Travel Shop" },
+      },
     ],
   },
   {
     path: "/destination",
     component: () => import("layouts/MainLayout.vue"),
     children: [
-      { path: "", component: () => import("pages/DestinationPage.vue") },
+      {
+        path: "",
+        component: () => import("pages/DestinationPage.vue"),
+        meta: { title: " HiChina Travel Destination" },
+      },
     ],
   },
   {
     path: "/auth/login",
     component: () => import("layouts/MainLayout.vue"),
-    children: [{ path: "", component: () => import("pages/LoginPage.vue") }],
+    children: [
+      {
+        path: "",
+        component: () => import("pages/LoginPage.vue"),
+        meta: { title: " HiChina Travel Login Page" },
+      },
+    ],
   },
   {
     path: "/auth/register",
     component: () => import("layouts/MainLayout.vue"),
-    children: [{ path: "", component: () => import("pages/RegisterPage.vue") }],
+    children: [
+      {
+        path: "",
+        component: () => import("pages/RegisterPage.vue"),
+        meta: { title: " HiChina Travel Register Page" },
+      },
+    ],
   },
   {
     path: "/product-detail/:skuGroupId",
     component: () => import("layouts/MainLayout.vue"),
     children: [
-      { path: "", component: () => import("pages/ProductDetailPage.vue") },
+      {
+        path: "",
+        component: () => import("pages/ProductDetailPage.vue"),
+        meta: { title: " HiChina Travel Product" },
+      },
     ],
   },
   {
     path: "/destination-detail/:destinationId",
     component: () => import("layouts/MainLayout.vue"),
     children: [
-      { path: "", component: () => import("pages/DestinationDetailPage.vue") },
+      {
+        path: "",
+        component: () => import("pages/DestinationDetailPage.vue"),
+        meta: { title: " HiChina Travel Destination" },
+      },
     ],
   },
   {
     path: "/blog-detail/:blogId",
     component: () => import("layouts/MainLayout.vue"),
     children: [
-      { path: "", component: () => import("pages/BlogDetailPage.vue") },
+      {
+        path: "",
+        component: () => import("pages/BlogDetailPage.vue"),
+        meta: { title: " HiChina Travel Blog" },
+      },
     ],
   },
   {
     path: "/contact",
     component: () => import("layouts/MainLayout.vue"),
-    children: [{ path: "", component: () => import("pages/ContactPage.vue") }],
+    children: [
+      {
+        path: "",
+        component: () => import("pages/ContactPage.vue"),
+        meta: { title: " HiChina Travel Contact" },
+      },
+    ],
   },
   {
     path: "/my-blogs",
     component: () => import("layouts/MainLayout.vue"),
-    children: [{ path: "", component: () => import("pages/MyBlogsPage.vue") }],
+    children: [
+      {
+        path: "",
+        component: () => import("pages/MyBlogsPage.vue"),
+        meta: { title: " HiChina Travel My Blog" },
+      },
+    ],
   },
   {
     path: "/my-orders",
     component: () => import("layouts/MainLayout.vue"),
-    children: [{ path: "", component: () => import("pages/MyOrdersPage.vue") }],
+    children: [
+      {
+        path: "",
+        component: () => import("pages/MyOrdersPage.vue"),
+        meta: { title: " HiChina Travel My Order" },
+      },
+    ],
   },
   {
     path: "/user-info",
     component: () => import("layouts/MainLayout.vue"),
-    children: [{ path: "", component: () => import("pages/UserInfoPage.vue") }],
+    children: [
+      {
+        path: "",
+        component: () => import("pages/UserInfoPage.vue"),
+        meta: { title: " HiChina Travel User" },
+      },
+    ],
   },
   {
     path: "/blog-create",
     component: () => import("layouts/MainLayout.vue"),
     children: [
-      { path: "", component: () => import("pages/BlogCreatePage.vue") },
+      {
+        path: "",
+        component: () => import("pages/BlogCreatePage.vue"),
+        meta: { title: " HiChina Travel Create Blog" },
+      },
     ],
   },
   {
     path: "/blog-edit/:blogId",
     component: () => import("layouts/MainLayout.vue"),
-    children: [{ path: "", component: () => import("pages/BlogEditPage.vue") }],
+    children: [
+      {
+        path: "",
+        component: () => import("pages/BlogEditPage.vue"),
+        meta: { title: " HiChina Travel Blog Editor" },
+      },
+    ],
   },
   {
     path: "/order-detail/:orderId",
     component: () => import("layouts/MainLayout.vue"),
     children: [
-      { path: "", component: () => import("pages/OrderDetailPage.vue") },
+      {
+        path: "",
+        component: () => import("pages/OrderDetailPage.vue"),
+        meta: { title: " HiChina Travel Order" },
+      },
     ],
   },
   {
     path: "/book",
     component: () => import("layouts/MainLayout.vue"),
-    children: [{ path: "", component: () => import("pages/BookPage.vue") }],
+    children: [
+      {
+        path: "",
+        component: () => import("pages/BookPage.vue"),
+        meta: { title: " HiChina Travel Book" },
+      },
+    ],
   },
   {
     path: "/alipay",
     component: () => import("layouts/MainLayout.vue"),
-    children: [{ path: "", component: () => import("pages/AlipayPage.vue") }],
+    children: [
+      {
+        path: "",
+        component: () => import("pages/AlipayPage.vue"),
+        meta: { title: " HiChina Travel Payment" },
+      },
+    ],
   },
   {
     path: "/wechatpay",
     component: () => import("layouts/MainLayout.vue"),
     children: [
-      { path: "", component: () => import("pages/WechatpayPage.vue") },
+      {
+        path: "",
+        component: () => import("pages/WechatpayPage.vue"),
+        meta: { title: " HiChina Travel Payment" },
+      },
     ],
   },
   {
     path: "/privacy",
     component: () => import("layouts/MainLayout.vue"),
-    children: [{ path: "", component: () => import("pages/PrivacyPage.vue") }],
+    children: [
+      {
+        path: "",
+        component: () => import("pages/PrivacyPage.vue"),
+        meta: { title: " HiChina Travel Privacy Policy" },
+      },
+    ],
   },
   {
     path: "/finishpay",
     component: () => import("layouts/MainLayout.vue"),
     children: [
-      { path: "", component: () => import("pages/FinishpayPage.vue") },
+      {
+        path: "",
+        component: () => import("pages/FinishpayPage.vue"),
+        meta: { title: " HiChina Travel Payment" },
+      },
     ],
   },
   {
     path: "/regvalidation/:regKey",
     component: () => import("layouts/MainLayout.vue"),
     children: [
-      { path: "", component: () => import("pages/RegvalidationPage.vue") },
+      {
+        path: "",
+        component: () => import("pages/RegvalidationPage.vue"),
+        meta: { title: " HiChina Travel " },
+      },
     ],
   },
   {
     path: "/regsuccess",
     component: () => import("layouts/MainLayout.vue"),
     children: [
-      { path: "", component: () => import("pages/RegSuccessPage.vue") },
+      {
+        path: "",
+        component: () => import("pages/RegSuccessPage.vue"),
+        meta: { title: " HiChina Travel " },
+      },
     ],
   },