点击侧边栏菜单跳转到main 页面

.home.vue页面

需要在 <el-main>标签下增加第一个路由占位符

因为登录的欢迎页面和点击下的子菜单会在同一个页面

因此需要判断获取路由路径如果是/home 路径则显示欢迎语(Devops管理系统) 如果不是则是路由占位符

home.vue 中

html 复制代码

<el-main>
          <div class="mainTitle" v-if="$route.path==='/home'">Devops管理系统</div>
          <!-- 路由占位符-->
          <router-view></router-view>
</el-main>

router.ts 中定义两个子菜单加载这两个页面

router.ts

html 复制代码

// 登录成功之后home页路由
        path : '/home',
        name : 'home',
        component : () => import('@/views/Home.vue'),
        children: [
            {
                path: '/sys/deploy', component: ()=>import('@/sys/SysDeploy.vue'),

            },
            {
                path: '/sys/app', component: ()=>import('@/sys/SysApp.vue')
            }
        ]
        },

后端接口：

html 复制代码

[
    {
        "id": 6,
        "url": "/",
        "path": "/home",
        "component": "Home",
        "name": "系统管理",
        "iconCls": "fa fa-windows",
        "meta": {
            "keepAlive": null,
            "requireAuth": true
        },
        "
        "children": [
            {
                "id": 30,
                "path": "/sys/deploy",
                "component": "SysDeploy",
                "name": "应用部署",
                "iconCls": "fa fa-ad",
                "meta": null,
                
            },
            {
                "id": 7,
                "path": "/sys/app",
                "component": "SysApp",
                "name": "App上传",
                "iconCls": "fa-solid fa-circle-arrow-up",
                "meta": null,
                "parentId": 6,
                "enabled": true,
                "children": null,
                "roles": null
            }
        ],
    }
]

前端依赖的后端接口字段 path, component

完整代码

router.ts

html 复制代码

//以 npm方式引入 vue3 路由
//定义的默认路由
import { createRouter,createWebHashHistory} from 'vue-router'
import Ad from "@/components/Ad.vue";
//公共路由
const publicRoutes = [
        {
        //登录
        path : '/',  // 路由路径 根组件对应的登录页面 对应后端
        name : 'Login',
        component : () => import('@/views/Login.vue'),
        },
        {
        // 登录成功之后home页路由
        path : '/home',
        name : 'home',
        component : () => import('@/views/Home.vue'),
        children: [
            {
                path: '/sys/deploy', component: ()=>import('@/sys/SysDeploy.vue'),

            },
            {
                path: '/sys/app', component: ()=>import('@/sys/SysApp.vue')
            }
        ]
        },

        {
        path : '/register',
        name : 'register',
        component : () => import('@/views/Register.vue')
        },
        {
        // 404
        path : '/404',
        name : '404',
        component : () => import('@/views/404.vue')
        },
        {
        // 任意路由
        path : '/:pathMatch(.*)*',
        name : 'Any',
        redirect : '/404'
        }
]
const router = createRouter({
    history : createWebHashHistory(),      //路由的hash模式
    // 定义一个路由数组 每个路由都需要映射到一个组件
    routes  : publicRoutes,
    // 使用浏览器的回退或者前进时，重新返回时保留滚动位置，跳转页面的话，不触发
    scrollBehavior(to,from,savePosition){
        if (savePosition){
            return savePosition;
        }else {
            return {top:0}
        }
    }
});

export default router

home.vue

html 复制代码

<template>
  <div class="common-layout">
    <el-container>
      <el-header class="homeHeader">
        <div class="headerTitle">Devops平台</div>
      </el-header>
      <el-container>
        <el-aside width="400px">
          <el-row class="tac">
            <el-col :span="12">
              <el-menu
                  default-active="2"
                  class="el-menu-vertical-demo"
                  router
              >
                <el-sub-menu index="1" v-for="item in menuList" :key="item.id">
                  <template #title>
                   <i :class="item.iconCls"/>
                    <span>{{ item.name}}</span>
                  </template>
                  <el-menu-item :index="subItem.path" v-for="subItem in item.children" :key="subItem.id">
                    <template #title>
                    <span>{{subItem.name}}</span>
                    </template>
                  </el-menu-item>
                </el-sub-menu>
              </el-menu>
            </el-col>
            </el-row>
        </el-aside>
        <el-main>
          <div class="mainTitle" v-if="$route.path==='/home'">Devops管理系统</div>
          <!-- 路由占位符-->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { Menu , Document, Location, Setting, Burger} from "@element-plus/icons-vue";
import axios from "axios";
import {onMounted,ref } from 'vue'
// 注册开关
const redirect = ref(undefined)
export default {
  name: "Home",
  components: {Burger, Setting, Document, Location},
  setup() {
    const menuList = ref();
    onMounted(()=>{
      axios.get("/api/menu").then(res =>{
        console.log("onMounted")
        const data = res.data
        console.log(data)
        menuList.value = data
      })
    })
    return {
      menuList
    }
  },
}
</script>



<style lang="less" scoped>

.homeHeader{
  background-color: #04befe;
  /*弹性展示*/
  display: flex;
  /* 居中对齐弹性盒子的各项 div 元素*/
  align-items: center;

}
.headerTitle {
  /* 字体大小*/
  font-size: 20px;
  /* 字体颜色*/
  color: #fffff9;
}
.mainTitle {
  /* 规定元素中文本的水平对齐方式 居中 */
  text-align: center;
  /* 颜色为深空色 */
  color: #04befe;
  /* 字体大小*/
  font-size: 30px;
/* 距离顶部的距离为 20px 数值越大下降位置越多 */
/* padding-top: 20px; */
}





</style>