菜单路由

路由配置

路由 | Vben Adminopen in new window

新增一个页面

src/views/study/index.vue

<template>
  <div>{{ msg }}</div>
</template>
<script setup>
  import { ref } from 'vue';
  const msg = ref('hello world');
</script>

新增一个路由模块

src/router/routes/modules/study.ts

import { AppRouteRecordRaw } from '/@/router/types';
import { LAYOUT } from '/@/router/constant';
const menu: AppRouteRecordRaw = {
  name: 'study:manager',
  path: '/study/manager',
  component: LAYOUT,
  meta: {
    title: '学习',
    icon: 'ant-design:align-center-outlined',
    perms: ['admin', 'study:manager'],
    orderNo: 99,
    component: 'LAYOUT',
  },
  children: [
    {
      name: 'study:index',
      path: '/study/index',
      component: () => import('/@/views/study/index.vue'),
      meta: {
        title: '样例首页',
        icon: 'ant-design:aliwangwang-filled',
        orderNo: 0,
        perms: ['admin', 'study:index'],
        component: '/study/index',
      },
    },
  ],
};

export default menu;

路由同步

前端路由可以通过【系统设置】->【前端路由】->【同步路由清单】，同步到【系统设置】->【菜单管理】模块，同步后，即可提供给【系统设置】->【角色管理】->【授权菜单】给角色分配权限。 image.png