路由配置

src/App.vue

@@ -1,20 +1,20 @@
 <script setup>
-import { userStore, groupStore } from '@/stores'
+import { userStore } from '@/stores'
 
 const user = userStore()
-const group = groupStore()
 </script>
 
 <template>
   <div>我是APP</div>
+
+  <hr />
+
+  <router-view></router-view>
+
+  <hr />
   <p>{{ user.token }}</p>
   <el-button type="primary" @click="user.setToken('111')">登录</el-button>
   <el-button type="danger" @click="user.setToken('')">退出</el-button>
-  <p>{{ group.groupxx }}</p>
-  <el-button type="primary" @click="group.setGroupxx('aaa')"
-    >设置group</el-button
-  >
-  <el-button type="danger" @click="group.setGroupxx('')">清除group</el-button>
 </template>
 
 <style scoped></style>

src/router/index.js

@@ -2,7 +2,39 @@ import { createRouter, createWebHistory } from 'vue-router'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
-  routes: []
+  routes: [
+    {
+      path: '/login',
+      component: () => import('@/views/LoginPage.vue')
+    },
+    {
+      path: '/register',
+      component: () => import('@/views/RegisterPage.vue')
+    },
+    {
+      path: '/',
+      component: () => import('@/views/layout/LayoutContainer.vue'),
+      redirect: '/message',
+      children: [
+        {
+          path: '/message',
+          component: () => import('@/views/message/MessageLayout.vue')
+        },
+        {
+          path: '/contacts',
+          component: () => import('@/views/contacts/ContactsLayout.vue')
+        },
+        {
+          path: '/meeting',
+          component: () => import('@/views/meeting/MeetingLayout.vue')
+        },
+        {
+          path: '/user',
+          component: () => import('@/views/user/UserLayout.vue')
+        }
+      ]
+    }
+  ]
 })
 
 export default router

src/views/LoginPage.vue

@@ -0,0 +1 @@
+<template>登录</template>

src/views/RegisterPage.vue

@@ -0,0 +1 @@
+<template>注册</template>

src/views/contacts/ContactsLayout.vue

@@ -0,0 +1 @@
+<template>通讯录</template>

src/views/layout/LayoutContainer.vue

@@ -0,0 +1,4 @@
+<template>
+  <div>布局架子</div>
+  <router-view></router-view>
+</template>

src/views/meeting/MeetingLayout.vue

@@ -0,0 +1 @@
+<template>会议</template>

src/views/message/MessageLayout.vue

@@ -0,0 +1 @@
+<template>消息</template>

src/views/user/UserLayout.vue

@@ -0,0 +1 @@
+<template>个人信息</template>