vue.js的基本框架搭建以及菜单栏的切换

基本UI框架

<template>
    <a-layout style="height: 100%;overflow: hidden;">
        <a-layout-header style="background-color: #021629;" a-layout>
          
        </a-layout-header>
        <a-layout>
            <a-layout-sider>
                
            </a-layout-sider>
            <a-layout-content>
                
            </a-layout-content>
        </a-layout>
    </a-layout>
</template>
<script setup>

</script>
<style>

</style>

大致效果

创建一个vue.js项目

基本架构

<template>
    <a-menu></a-menu>
</template>
<script setup>

</script>
<style></style>

添加a-menu菜单组件中的各个参数

<template>
  <!-- 菜单组件 -->
  <a-menu
    style="height: 100%"
    v-model:openKeys="openKeys"
    v-model:selectedKeys="selectedKeys"
    mode="inline"
    :items="menuItem"
    @select="selectItem"
  >
  </a-menu>
</template>

<script setup>

</script>

<style></style>

完善各个参数

<template>

    <a-menu
      style="height: 100%"
      v-model:openKeys="openKeys"
      v-model:selectedKeys="selectedKeys"
      mode="inline"
      :items="menuItem"
      @select="selectItem"
    >
    </a-menu>

</template>
<script setup>
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";


const openKeys = ref(["1"]); // 菜单展开的keys
const selectedKeys = ref(["key1"]); // 当前选中的keys
const menuItem = [
{
    key: "/home",
    label: "首页",
    title: "首页",
    
  },
 {
    key: "",
    label: "业务管理",
    title: "业务管理",
    children: [

    ],
  },
  
  {
    key: "/content",
    label: "基础配置",
    title: "基础配置",
    children: [
    { key: "/content/farm", label: "牧场管理"},
  { key: "/content/pens", label: "圈舍管理"},
  { key: "/content/data", label: "数据字典"},
    ],
  },
  {
    key: "/user",
    label: "系统管理",
    title: "系统管理",
    children: [
      { key: "/user/system", label: "人员管理" },
    ],
  },
  //自行添加其它菜单项
];
const router = useRouter(); // Vue Router 实例
const route = useRoute(); // 当前路由实例
const selectItem = ({ item, key, selectedKeys }) => {
  router.push({ path: key }); // 点击菜单项时导航到相应路径
};
</script>
<style></style>

UI框架添加配置

<template>
    <a-layout style="height: 100%;overflow: hidden;">
        <a-layout-header style="background-color: #021629;" a-layout>
          
        </a-layout-header>
        <a-layout>
            <a-layout-sider>
                <MyMenu/><!--自定义别名-->
            </a-layout-sider>
            <a-layout-content>
                <router-view></router-view><!--引入router-view-->
            </a-layout-content>
        </a-layout>
    </a-layout>
</template>
<script setup>

import MyMenu from '../menu/menu.vue' //根据自己的项目实施进行修改
</script>
<style>

</style>

此时效果图：

路由配置

import {
    createRouter,
    createWebHistory,
    createWebHashHistory,
  } from "vue-router";

//懒加载的方式
//具体的导入路径根据实际的项目进行修改
  const UserLogin = () => import("../page/login/userlogin.vue");


  const routerInstance = createRouter({
    history: createWebHistory(),
    routes: [
      {path:"/user",component:UserContent},
      {
        path: "/userlogin",
        component: UserLogin,
        meta: {
          title: "用户登录",
        },
      },
      
      {
        path: "/",
        component: HomePage,
        children: [
          {
            path: "home",
            component:Home,
            name:"userlogin"
          },
          {
            path: "user",
            children: [
              {
                path: "system",
                meta: { title: "人员管理" },
                component: UserContent,
              },
            ],
          },
          {
            path: "content",
            children: [
              {
                path: "farm",
                meta: { title: "牧场管理" },
                name:"ranch",
                component: Farm,
              },
              {
                path: "pens",
                meta: { title: "圈舍管理" },
                component: Pens,
              },
              {
                path: "data",
                meta: { title: "数据字典" },
                component: DataDictionary,
              },
            ],
          },
        ],
      },
    ],
  });
  

  
  export default routerInstance;

 注意：具体的需自己配置，菜单的内容根据实际情况实现即可！

大致效果

以下是启动我的前后端项目的情况（简版）：