homevue

src/router/index.js

@@ -1,12 +1,68 @@
 import { createRouter, createWebHistory } from "vue-router";
 import { useAuthStore } from "../stores/auth";
 
+const placeholder = () => import("../views/PlaceholderView.vue");
+
 const routes = [
   {
     path: "/",
-    name: "home",
-    component: () => import("../views/HomeView.vue"),
+    component: () => import("../layouts/MainLayout.vue"),
     meta: { requiresAuth: true },
+    children: [
+      {
+        path: "",
+        name: "home",
+        component: () => import("../views/HomeView.vue"),
+      },
+      {
+        path: "avatar",
+        name: "avatar",
+        component: placeholder,
+        meta: { title: "形象" },
+      },
+      {
+        path: "material",
+        name: "material",
+        component: placeholder,
+        meta: { title: "素材" },
+      },
+      {
+        path: "voice",
+        name: "voice",
+        component: placeholder,
+        meta: { title: "声音" },
+      },
+      {
+        path: "compose",
+        name: "compose",
+        component: placeholder,
+        meta: { title: "合成" },
+      },
+      {
+        path: "extract",
+        name: "extract",
+        component: placeholder,
+        meta: { title: "提取" },
+      },
+      {
+        path: "design",
+        name: "design",
+        component: placeholder,
+        meta: { title: "设计" },
+      },
+      {
+        path: "model",
+        name: "model",
+        component: placeholder,
+        meta: { title: "模型" },
+      },
+      {
+        path: "help",
+        name: "help",
+        component: placeholder,
+        meta: { title: "帮助" },
+      },
+    ],
   },
   {
     path: "/login",
@@ -31,8 +87,9 @@ const router = createRouter({
 
 router.beforeEach((to) => {
   const auth = useAuthStore();
+  const requiresAuth = to.matched.some((record) => record.meta.requiresAuth);
 
-  if (to.meta.requiresAuth && !auth.isAuthenticated) {
+  if (requiresAuth && !auth.isAuthenticated) {
     return { name: "login" };
   }