change browser tab title

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

@@ -1,6 +1,11 @@
-import { route } from 'quasar/wrappers'
-import { createRouter, createMemoryHistory, createWebHistory, createWebHashHistory } from 'vue-router'
-import routes from './routes'
+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
@@ -14,7 +19,9 @@ 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 }),
@@ -23,8 +30,15 @@ export default route(function (/* { store, ssrContext } */) {
     // 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)
-  })
+    history: createHistory(
+      process.env.MODE === "ssr" ? void 0 : process.env.VUE_ROUTER_BASE
+    ),
+  });
+  Router.beforeEach((to, from, next) => {
+    const pageTitle = to.meta.title || "Default Title";
+    document.title = pageTitle;
+    next();
+  });
 
-  return Router
-})
+  return Router;
+});

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

@@ -2,43 +2,79 @@ 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 Guidebook" },
+      },
     ],
   },
   {
     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" },
+      },
+    ],
   },
   {
     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" },
+      },
+    ],
   },
   {
     path: "/product-detail/:skuGroupId",
@@ -64,7 +100,13 @@ const routes = [
   {
     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",