feat: 初步完成菜单界面及其路由跳转

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "vue_3.2",
+  "name": "myVue_3.2",
   "version": "0.1.0",
   "private": true,
   "scripts": {

src/api/menu.js

@@ -0,0 +1,8 @@
+import request from './request'
+// 发起 GET 请求拿到后端菜单数据
+export const menuList = () => {
+  return request({
+    // 此处为模拟后端接口的 url
+    url: '/menus'
+  })
+}

src/layout/layoutIndex.vue

@@ -0,0 +1,41 @@
+<template>
+  <el-container class="app-wrapper">
+    <el-aside width="200px" class="sidebar-container">
+      <menu-index></menu-index>
+    </el-aside>
+    <el-container class="container">
+      <el-header>Header</el-header>
+      <el-main>
+        <router-view />
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
+
+<script setup>
+import menuIndex from './menu/menuIndex'
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.container {
+  width: calc(100% - $sideBarWidth);
+  height: 100%;
+
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 9;
+  transition: all 0.28s;
+  &.hidderContainer {
+    width: calc(100% - $hideSideBarWidth);
+  }
+}
+::v-deep(.el-header) {
+  padding: 0;
+}
+</style>

src/layout/menu/menuIndex.vue

@@ -0,0 +1,63 @@
+<template>
+  <el-menu
+    active-text-color="#ffd04b"
+    background-color="variables.menuBg"
+    class="el-menu-vertical-demo"
+    text-color="#fff"
+    router
+    unique-opened
+    :default-active="defaultActive"
+  >
+    <el-sub-menu
+      :index="item.id"
+      v-for="(item, index) in menusList"
+      :key="item.id"
+    >
+      <template #title>
+        <el-icon>
+          <component :is="iconList[index]"></component>
+        </el-icon>
+        <span>{{ item.authName }}</span>
+      </template>
+      <el-menu-item
+        :index="'/menu/' + it.path"
+        v-for="it in item.children"
+        :key="it.id"
+      >
+        <template #title>
+          <el-icon>
+            <component :is="icon"></component>
+          </el-icon>
+          <span>{{ it.authName }}</span>
+        </template>
+      </el-menu-item>
+    </el-sub-menu>
+  </el-menu>
+</template>
+
+<script setup>
+import { menuList } from '@/api/menu'
+import { ref } from 'vue'
+
+// 引入所需的 icon 列表
+const iconList = ref(['user', 'setting', 'shop', 'tickets', 'pie-chart'])
+const icon = ref('menu')
+
+// 数据渲染
+const menusList = ref([])
+// 发起菜单数据获取请求并调用
+const initMenusList = async () => {
+  menusList.value = await menuList()
+}
+initMenusList()
+
+// 配合重定向，默认进入 user 界面
+const defaultActive = ref('/menu/users')
+
+// const defaultActive = ref(sessionStorage.getItem('path') || '/users')
+// const savePath = (path) => {
+//   sessionStorage.setItem('path', `/${path}`)
+// }
+</script>
+
+<style lang="scss" scoped></style>

src/main.js

@@ -12,6 +12,7 @@ const app = createApp(App)
 SvgIcon(app)
 app.use(store).use(router).mount('#app')
 
+// 全局引入 Element 的 icon 组件
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component)
 }

src/router/index.js

@@ -1,11 +1,81 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
+const layoutIndex = () => import('../layout/layoutIndex.vue')
+
+const zdLogin = () => import('../views/login/zdLogin.vue')
+const zdUsers = () => import('../views/users/zdUsers.vue')
+const zdCategories = () => import('../views/categories/zdCategories.vue')
+const zdGoods = () => import('../views/goods/zdGoods.vue')
+const zdOrders = () => import('../views/orders/zdOrders.vue')
+const zdParams = () => import('../views/params/zdParams.vue')
+const zdReports = () => import('../views/reports/zdReports.vue')
+const zdRights = () => import('../views/rights/zdRights.vue')
+const zdRoles = () => import('../views/roles/zdRoles.vue')
 
 const routes = [
   // 登录路由
   {
     path: '/login',
-    name: 'Login',
+    component: zdLogin,
-    component: () => import('../views/login/zdLogin')
+    meta: {
+      title: '登录界面'
+    }
+  },
+  // 将 / 重定向到 /login
+  {
+    path: '/',
+    redirect: '/login'
+  },
+  // 菜单界面相关路由
+  {
+    path: '/menu',
+    component: layoutIndex,
+    meta: {
+      title: '菜单界面'
+    },
+    // 重定向，默认到 菜单界面的 user 分支
+    redirect: '/menu/users',
+    children: [
+      {
+        path: 'users',
+        name: 'users',
+        component: zdUsers
+      },
+      {
+        path: 'categories',
+        name: 'categories',
+        component: zdCategories
+      },
+      {
+        path: 'goods',
+        name: 'goods',
+        component: zdGoods
+      },
+      {
+        path: 'orders',
+        name: 'orders',
+        component: zdOrders
+      },
+      {
+        path: 'params',
+        name: 'params',
+        component: zdParams
+      },
+      {
+        path: 'reports',
+        name: 'reports',
+        component: zdReports
+      },
+      {
+        path: 'rights',
+        name: 'rights',
+        component: zdRights
+      },
+      {
+        path: 'roles',
+        name: 'roles',
+        component: zdRoles
+      }
+    ]
   }
 ]
 

src/router/premission.js

@@ -6,7 +6,7 @@ const whiteList = ['/login']
 router.beforeEach((to, from, next) => {
   if (store.getters.token) {
     if (to.path === '/login') {
-      next('/')
+      next('/menu')
     } else {
       next()
     }

src/store/modules/app.js

@@ -17,7 +17,7 @@ export default {
           .then((res) => {
             console.log(res)
             commit('setToken', res.token)
-            router.replace('/')
+            router.replace('/menu')
             resolve()
           })
           .catch((err) => {

src/views/categories/zdCategories.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>categories</div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped></style>

src/views/goods/zdGoods.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>goods</div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped></style>

src/views/orders/zdOrders.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>orders</div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped></style>

src/views/params/zdParams.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>params</div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped></style>

src/views/reports/zdReports.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>reports</div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped></style>

src/views/rights/zdRights.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>rights</div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped></style>

src/views/roles/zdRoles.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>roles</div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped></style>

src/views/users/zdUsers.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>users</div>
+</template>
+
+<script></script>
+
+<style lang="scss" scoped></style>

vue.config.js

@@ -81,16 +81,16 @@ module.exports = {
         }
       }
     }
+  },
+  css: {
+    loaderOptions: {
+      sass: {
+        // 12版本用 additionalData:
+        additionalData: `
+          @import "@/styles/variables.scss";  // scss文件地址
+          @import "@/styles/mixin.scss";     // scss文件地址
+        `
+      }
+    }
   }
-  // css: {
-  //   loaderOptions: {
-  //     sass: {
-  //       // 8版本用prependData:
-  //       prependData: `
-  //         @import "@/styles/variables.scss";  // scss文件地址
-  //         @import "@/styles/mixin.scss";     // scss文件地址
-  //       `
-  //     }
-  //   }
-  // }
 }