set up mixin and add new page

hichina-main-front-mobile-first/quasar.config.js

@@ -23,7 +23,7 @@ module.exports = configure(function (ctx) {
     // app boot file (/src/boot)
     // --> boot files are part of "main.js"
     // https://v2.quasar.dev/quasar-cli-webpack/boot-files
-    boot: [],
+    boot: ["axios", "globalMixin"],
 
     // https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-css
     css: ["app.scss"],

hichina-main-front-mobile-first/src/boot/globalMixin.js

@@ -0,0 +1,17 @@
+import { boot } from "quasar/wrappers";
+
+// "async" is optional;
+// more info on params: https://v2.quasar.dev/quasar-cli/boot-files
+export default boot(async (/* { app, router, ... } */ { app }) => {
+  // something to do
+  app.mixin({
+    methods: {
+      testGlobalMethod() {
+        console.log("from global mixin method");
+      },
+      goPage(val) {
+        this.$router.push(val);
+      },
+    },
+  });
+});

hichina-main-front-mobile-first/src/layouts/MainLayout.vue

@@ -13,7 +13,14 @@
             </q-toolbar-title>
           </div>
         </div>
-        <q-btn flat no-caps no-wrap class="q-ml-xl" v-if="$q.screen.gt.xs">
+        <q-btn
+          @click="goPage('/guideintro')"
+          flat
+          no-caps
+          no-wrap
+          class="q-ml-xl"
+          v-if="$q.screen.gt.xs"
+        >
           GuideBooks
         </q-btn>
         <q-btn flat no-caps no-wrap class="q-ml-sm" v-if="$q.screen.gt.xs">

hichina-main-front-mobile-first/src/pages/GuideIntroPage.vue

@@ -0,0 +1,9 @@
+<template>
+  <q-page padding> guide intro placeholder </q-page>
+</template>
+
+<script>
+export default {
+  name: "GuideIntroPage",
+};
+</script>

hichina-main-front-mobile-first/src/pages/IndexPage.vue

@@ -197,8 +197,8 @@
 <script>
 import { ref, onMounted } from "vue";
 import { defineComponent } from "vue";
-import { api } from "boot/axios";
 import { debounce } from "lodash";
+import { api } from "boot/axios";
 
 export default defineComponent({
   name: "IndexPage",

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

@@ -1,19 +1,23 @@
-
 const routes = [
   {
-    path: '/',
-    component: () => import('layouts/MainLayout.vue'),
+    path: "/",
+    component: () => import("layouts/MainLayout.vue"),
+    children: [{ path: "", component: () => import("pages/IndexPage.vue") }],
+  },
+  {
+    path: "/guideintro",
+    component: () => import("layouts/MainLayout.vue"),
     children: [
-      { path: '', component: () => import('pages/IndexPage.vue') }
-    ]
+      { path: "", component: () => import("pages/GuideIntroPage.vue") },
+    ],
   },
 
   // Always leave this as last one,
   // but you can also remove it
   {
-    path: '/:catchAll(.*)*',
-    component: () => import('pages/ErrorNotFound.vue')
-  }
-]
+    path: "/:catchAll(.*)*",
+    component: () => import("pages/ErrorNotFound.vue"),
+  },
+];
 
-export default routes
+export default routes;