first

src/router.ts

@@ -0,0 +1,96 @@
+import {
+  createRouter as createClientRouter,
+  createWebHistory,
+  createMemoryHistory,
+} from 'vue-router/auto'
+
+/*
+ * By default, this plugins checks the folder at src/pages for any .vue files
+ * and generates the corresponding routing structure basing itself in the file name.
+ * This way, you no longer need to maintain a routes array when adding routes to your application,
+ * instead just add the new .vue component to the routes folder and let this plugin do the rest!
+ *
+ * Let's take a look at a simple example:
+ *
+ * src/pages/
+ * ├── index.vue
+ * ├── about.vue
+ * └── users/
+ *     ├── index.vue
+ *     └── [id].vue
+ * This will generate the following routes:
+ *
+ * /: -> renders the index.vue component
+ * /about: -> renders the about.vue component
+ * /users: -> renders the users/index.vue component
+ * /users/:id: -> renders the users/[id].vue component. id becomes a route param.
+ *
+ * View more examples:
+ * @see https://uvr.esm.is/guide/file-based-routing.html
+ */
+export function createRouter() {
+  return createClientRouter({
+    /**
+     * If you need to serve vuero under a subdirectory,
+     * you have to set the name of the directory in createWebHistory here
+     * and update "base" config in vite.config.ts
+     */
+    // history: createWebHistory('my-subdirectory'),
+    history: import.meta.env.SSR ? createMemoryHistory() : createWebHistory(),
+
+    /**
+     * You can extend existing routes:
+     */
+    // extendRoutes: (routes) => {
+    //   const adminRoute = routes.find((r) => r.name === '/admin')
+    //   if (!adminRoute) {
+    //     adminRoute.meta ??= {}
+    //     adminRoute.meta.requiresAuth = true
+    //   }
+    //   // completely optional since we are modifying the routes in place
+    //   return routes
+    // },
+
+    // handle scroll behavior between routes
+    scrollBehavior: (to, from, savedPosition) => {
+      // Scroll to heading on click
+      if (to.hash) {
+        if (to.hash === '#') {
+          return {
+            top: 0,
+            behavior: 'smooth',
+          }
+        }
+
+        const el = document.querySelector(to.hash)
+
+        // vue-router does not incorporate scroll-margin-top on its own.
+        if (el) {
+          const top = parseFloat(getComputedStyle(el).scrollMarginTop)
+          if (el instanceof HTMLElement) {
+            el.focus()
+          }
+
+          return {
+            el: to.hash,
+            behavior: 'smooth',
+            top,
+          }
+        }
+
+        return {
+          el: to.hash,
+          behavior: 'smooth',
+        }
+      }
+
+      // Scroll to top of window
+      if (savedPosition) {
+        return savedPosition
+      }
+      else if (to.path !== from.path) {
+        return { top: 0 }
+      }
+    },
+  })
+}