vue3+element plus搭建后台管理系统

vue3+element plus搭建后台管理系统

项目地址github
https://github.com/cc147151/v3-admin

src/router/testRoleRouter.js为各个用户登录之后返回的路由表（接口未返回路由表，故做一层拦截store/modules/permission.js的actions:getMenus）

定义路由：（含有children的路由对象将视为菜单栏的sub-menu）
(根路由添加name，是因为router.removeRoute()方法参数只支持name删除，在退出登录的动作)
整个菜单栏是通过在代码里定义的非公共路由表里 筛选 出来后端返回对应权限的路由表,然后去注册这些路由
1.定义一个路由时，通常把它当作一个含有多个子菜单来创建，因为我们需要指定layout组件
2.hidden属性为true时候，代表左边菜单栏需要隐藏它。
3.如果为一级菜单，children数组只需拥有一项即可，(需要多项时候，其它子项添加hidden属性，否则就不视为一级菜单)
4.处理代码在sotre/modules/permission.js

约定： 定义带有hidden（不需要菜单显示的）的路由，其同级必须至少有一个是菜单

定义路由如下：

一级路由 （针对菜单栏的一级菜单，要给予children，忘记添加children内容，会隐藏它，但是一定要有一个children数组）

// 可参考router/visit.js
import layout from '@/layout/index'
export const visit = [
  {
    path: '/visit',
    component: layout,
    redirect: '/visit/index',
    //    必填，router.removeRoute()方法参数只支持name删除
    name: 'Visit',
    // 必写children，底限为[]
    children: [
      {
        path: '/visit/index',
        component: () => import('@/views/visit/index.vue'),
        meta: {
          title: '浏览量'
        }
      },
      {
        path: '/visit/detail',
        component: () => import('@/views/visit/detail/index.vue'),
        //    hidden代表不显示在左边菜单栏
        hidden: true,
        meta: {
          title: '详情'
        }
      }
    ]
  }
]

5.多级路由时候，一定要添加title(例：营销中心)，用于菜单(el-sub-menu)显示文字
多级路由

import layout from '@/layout/index'
const RouteView = {
  render() {
    return (
      <>
        
      
    )
  }
}
export const marking = [
  {
    path: '/marking',
    component: layout,
    redirect: '/marking/active',
    name: 'Marking',
    meta: {
      title: '营销中心'
    },
    children: [
      {
        path: '/marking/active',
        meta: {
          title: '活动管理'
        },
        component: () => import('@/views/marking/index')
      },
      {
        hidden: true,
        path: '/marking/manageDetail',
        meta: {
          title: '活动管理详情'
        },
        component: () => import('@/views/marking/manageDetail')
      },
      {
        path: '/marking/theme',
        component: RouteView,
        redirect: '/marking/theme/yuanDan',
        meta: {
          title: '活动主题'
        },
        children: [
          {
            path: '/marking/theme/yuanDan',
            component: () => import('@/views/marking/theme/yuanDan/index.vue'),
            meta: {
              title: '元旦活动'
            }
          },
          {
            path: '/marking/theme/newYear',
            component: () => import('@/views/marking/theme/newYear/index.vue'),
            meta: {
              title: '春节活动'
            }
          },
          {
            path: '/marking/theme/detail',
            component: () => import('@/views/marking/theme/detail/index'),
            meta: {
              title: '活动详情'
            },
            hidden: true
          }
        ]
      }
    ]
  }
]

感谢慕课网！！！