ADD: 页面布局

src/layouts/admin.vue

+<template>
+    <el-container>
+        <el-header>
+            <f-header/>
+        </el-header>
+        <el-container>
+            <el-aside>
+                <f-menu/>
+            </el-aside>
+            <el-main>
+                <f-tag-list/>
+                <router-view></router-view>
+            </el-main>
+        </el-container>
+    </el-container>
+</template>
+
+<script setup>
+import FHeader from './components/FHeader.vue';
+import FMenu from './components/FMenu.vue';
+import FTagList from './components/FTagList.vue';
+
+
+
+</script>
\ No newline at end of file

src/layouts/components/FHeader.vue

+<template>
+    <div>头部</div>
+    
+</template>
\ No newline at end of file

src/layouts/components/FMenu.vue

+<template>
+    <div>菜单栏</div>
+</template>
\ No newline at end of file

src/layouts/components/FTagList.vue

+<template>
+    <div>标签导航</div>
+</template>
\ No newline at end of file

src/pages/index.vue

 <template>
     <div>
         后台首页
-        {{ $store.state.user.username }}
+        {{ $store.state.user }}
 
         <el-button @click="handleLogout">退出登录</el-button>
 

src/router/index.js

@@ -2,35 +2,42 @@
 // createWebHashHistory hash模式 地址有#
 // createWebHistory 历史模式
 import { createRouter, createWebHashHistory } from "vue-router";
+import Admin from '@/layouts/admin.vue'
 import Index from '@/pages/index.vue'
 import NotFound from '@/pages/404.vue'
 import Login from '@/pages/login.vue'
 
 
 
-export const routes = [{
-    path: "/",
-    component: Index,
-    meta:{
-        title:"后台首页"
-
-    }
-},
-{
-    path: "/login",
-    name:"login",
-    component: Login,
-    meta:{
-        title:"登录页面"
-
-    }
-},
-{
-    path: '/:pathMatch(.*)*',
-    name: 'NotFound',
-    component: NotFound
-
-}]
+export const routes = [
+    {
+        path: "/",
+        component: Admin,
+        // 子路由
+        children: [{
+            path: "/",
+            component: Index,
+            meta: {
+                title: "后台首页"
+
+            }
+        }]
+    },
+    {
+        path: "/login",
+        name: "login",
+        component: Login,
+        meta: {
+            title: "登录页面"
+
+        }
+    },
+    {
+        path: '/:pathMatch(.*)*',
+        name: 'NotFound',
+        component: NotFound
+
+    }]
 
 
 // 创建路由实例 导入配置项和模式