Vben Admin 教學 <設定菜單路由>

Vben Admin 的路由系統算是非常簡單可以入門

找到路由資料夾

src/router/routes/modules
如果你是下載完整版本的可以在這邊看到 demo 資料夾，裡面是一堆功能的路由，我們可以拉一個起來改
不過不用放在 demo 資料夾，我們自己的放在外層
src/router/routes/modules
也是可以的，例如我要建構一個 samanager
src/router/routes/modules/saManager.ts
這樣系統就可以抓到了，

單階層選單連結

假設我們沒有要子選單
src/router/routes/modules/saManager.ts

import type { AppRouteModule } from '@/router/types';
import {  LAYOUT } from '@/router/constant';
const SaManager: AppRouteModule = {
  path: '/sa_manager',
  name: 'SaManager',
  component: LAYOUT,
  redirect:'/sa_manager/list',
  meta: {
    orderNo: 500,
    icon: 'ion:bar-chart-outline',
    title: '系統管理帳號',
  },
};
export default SaManager;

如果有要子選單可以添加

多層選單

import type { AppRouteModule } from '@/router/types';

import {  LAYOUT } from '@/router/constant';

const SaManager: AppRouteModule = {
  path: '/sa_manager',
  name: 'SaManager',
  component: LAYOUT,
  redirect: '/sa_manager/list',
  meta: {
    orderNo: 500,
    icon: 'ion:bar-chart-outline',
    title: '系統管理帳號',
  },
  children: [
    {
      path: 'list',
      name: 'SaManagerList',
      meta: {
        title: '管理員列表',
      },
      component: () => import('@/views/sa_manager/list.vue'),
    },

  ],
};

export default SaManager;

這時 /views/sa_manager/list.vue 這個檔案就已經要建構出來了，系統的要求至少檔案裡面要放個 template 標籤

<template>
  SA Manager List
</template>

這樣最基礎的就成功了

ICON 清單

http://https://icon-sets.iconify.design/