Arco Pro最佳实践，路由与菜单

1.路由

路由通常都和菜单绑定在一起，为了减少维护的量，Arco直接通过路由表生成了菜单。

首先，需要先了解一下路由表的配置

现在我们来解析一下仪表盘的路由代码（dashboard.ts）：

import { DEFAULT_LAYOUT } from '../base';
import { AppRouteRecordRaw } from '../types';

const DASHBOARD: AppRouteRecordRaw = {
  path: '/dashboard',
  name: 'dashboard',
  component: DEFAULT_LAYOUT,
  meta: {
    locale: 'menu.dashboard',
    requiresAuth: true,
    icon: 'icon-dashboard',
    order: 0,
  },
  children: [
    {
      path: 'workplace',
      name: 'Workplace',
      component: () => import('@/views/dashboard/workplace/index.vue'),
      meta: {
        locale: 'menu.dashboard.workplace',
        requiresAuth: true,
        roles: ['*'],
      },
    },

    {
      path: 'monitor',
      name: 'Monitor',
      component: () => import('@/views/dashboard/monitor/index.vue'),
      meta: {
        locale: 'menu.dashboard.monitor',
        requiresAuth: true,
        roles: ['admin'],
      },
    },
  ],
};

export default DASHBOARD;

解析如下片段：

path: '/dashboard',  // 一级路径
name: 'dashboard',   // 路由名称
component: DEFAULT_LAYOUT, // 要跳转的视图，这里要跳转到页面的基本布局
meta: {
  locale: 'menu.dashboard',  // 菜单名字
  requiresAuth: true,   // 需要登录鉴权
  icon: 'icon-dashboard',  // 设置图标
  order: 0,   // 排序路由菜单项。如果设置该值，值越高，越靠前
},

路由 Meta 元信息：

• roles：配置能访问该页面的角色，如果不匹配，则会被禁止访问该路由页面
• requiresAuth：是否需要登录鉴权
• icon：菜单配置icon
• locale：一级菜单名（语言包键名）
• hideInMenu：是否在左侧菜单中隐藏该项
• hideChildrenInMenu：强制在左侧菜单中显示单项
• activeMenu：高亮设置的菜单项
• order：排序路由菜单项。如果设置该值，值越高，越靠前
• noAffix：如果设置为true，标签将不会添加到tab-bar中
• ignoreCache：如果设置为true页面将不会被缓存

https://arco.design/iconbox/libs，字节提供的图标库，可以满足基本需求啦！

然后再来看一下子菜单：

children: [
  {
    path: 'workplace',
    name: 'Workplace',
    component: () => import('@/views/dashboard/workplace/index.vue'),
    meta: {
      locale: 'menu.dashboard.workplace',
      requiresAuth: true,
      roles: ['*'],  // 允许所有用户访问
    },
  },

  {
    path: 'monitor',
    name: 'Monitor',
    component: () => import('@/views/dashboard/monitor/index.vue'),
    meta: {
      locale: 'menu.dashboard.monitor',
      requiresAuth: true,
      roles: ['admin'],  // 只允许管理员用户访问
    },
  },
],

---

2.菜单

新增一个菜单项的步骤：

在 views/dashboard 中新增一个 kaka文件夹，并在其中新增 index.vue

我们以添加一个表单为例：

<template>
  <a-form :model="form">
    <a-row :gutter="16">
      <a-col :span="8">
        <a-form-item field="value1" label="Value 1" label-col-flex="100px">
          <a-input v-model="form.value1" placeholder="please enter..." />
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item field="value2" label="Value 2" label-col-flex="80px">
          <a-input v-model="form.value2" placeholder="please enter..." />
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item field="value3" label="Value 3" label-col-flex="80px">
          <a-input v-model="form.value3" placeholder="please enter..." />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="16">
      <a-col :span="16">
        <a-form-item field="value4" label="Value 4" label-col-flex="100px">
          <a-input v-model="form.value4" placeholder="please enter..." />
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item field="value5" label="Value 5" label-col-flex="80px">
          <a-input v-model="form.value5" placeholder="please enter..." />
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
  {{ form }}
</template>

<script lang="ts">
  import { reactive } from 'vue';

  export default {
    name: 'Kaka',
    setup() {
      const form = reactive({
        value1: '',
        value2: '',
        value3: '',
        value4: '',
        value5: '',
      });

      return {
        form,
      };
    },
  };
</script>

接着：在路由表中新增监控页的路由配置：

{
	path: 'kaka',
	name: 'kaka',
	component: () => import('@/views/dashboard/kaka/index.vue'),
	meta: {
	  locale: 'menu.dashboard.kaka',
	  requiresAuth: true,
	  roles: ['*'],
},

随后，新增语言包：

内容如下：

en-US.ts：（英文支持）

export default {
  'menu.dashboard.kaka': 'XiaoQian',
};

zh-CN.ts：（中文支持）

export default {
  'menu.dashboard.kaka': '小钱',
};

最后，在国际化语言包中引入：（src/locale/zh-CN.ts）

并在下面使用它：

src/locale/en-US.ts文件同理：

---

3.测试

访问网站测试，新的导航已经添加成功啦！

中文状态下：

英文状态下：