后台管理Menu路由导航

1.先引入UI库

以v3+element-plus为例

1.引入Menu菜单导航

1.html

<el-menu
      active-text-color="#FF3333"
      text-color="#fff"
      background-color="#002140"
      class="el-menu-vertical-demo"
      style="min-height: 100vh"
      default-active="/layout" //默认显示路由
      unique-opened //只展开一个子菜单
      router //激活router模式
    >
      <div class="menu-title">分期付管理后台</div>
      <template v-for="(item, index) in list" :key="index">
        <!-- 只显示一级菜单 -->
        <template v-if="item.title">
          <el-menu-item :index="item.path">
            <i :class="item.iconClass"></i>
            <el-menu-item :index="item.path">{{ item.name }}</el-menu-item>
          </el-menu-item>
        </template>
        <!-- 显示二级菜单 -->
        <template v-else>
          <el-sub-menu :index="item.path">
            <!-- 一级菜单 -->
            <template #title>
              <i :class="item.iconClass"></i>
              <div style="width: 0.2rem"></div>
              <span>{{ item.name }}</span>
            </template>
            <!-- 二级菜单 -->
            <el-menu-item-group>
              <template
                v-for="(child, index) in item.children"
                :key="index + ''"
              >
                <span v-if="child.hidden">
                  <el-menu-item :index="child.path">{{
                    child.name
                  }}</el-menu-item>
                </span>
              </template>
            </el-menu-item-group>
          </el-sub-menu>
        </template>
      </template>
    </el-menu>

2.js

//引入路由（v3写法）
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();

//获取路由信息，并存放在list里
const list = router.options.routes.filter((v) => v.hidden);

3.配置路由

import { createRouter, createWebHistory } from 'vue-router'
import Login from '../views/login/Login.vue'

const routes = [
{
        path: '/layout',
        name: '首页',
        // meta: { isShow: true, title: true, iconClass: 'fa fa-home' },
        iconClass: 'fa fa-home',//字体图标
        hidden: true,//是否在一级菜单里显示
        title: true,//是否只显示一级菜单
        redirect: '/layout/home',//重定向
        component: () => import('../layout/Layout.vue'),
        children: [
            {
                path: '/layout/home',
                name: '首页',
                component: () => import('../views/home/Home.vue'),
            }
        ]
    },
    {
        path: '/product',
        name: '产品管理',
        redirect: '/product/product',
        iconClass: 'fa fa-calendar',
        hidden: true,
        // meta: { isShow: true, iconClass: 'fa fa-calendar' },
        component: () => import('../layout/Layout.vue'),
        children: [
            {
                path: '/product/product',
                name: '产品列表',
                hidden: true,//是否在二级菜单里显示
                component: () => import('../views/product/Product.vue')
            }，
            {
                path: '/product/Lb-add',
                name: '新增',
                component: () => import('../views/product/conponents/Lb-add.vue')
            },
            {
                path: '/product/Lb-redact',
                name: '编辑',
                component: () => import('../views/product/conponents/Lb-redact.vue')
            },
        ]
    },
]
const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes
})

export default router