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.测试

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

中文状态下：

英文状态下：

Arco Pro最佳实践，路由与菜单相关推荐

python组件的react实现_React-Router动态路由设计最佳实践
写在前面随着单页应用(SPA)概念的日趋火热,React框架在设计和实践中同样也围绕着SPA的概念来打造自己的技术栈体系,其中路由模块便是非常重要的一个组成部分.它承载着应用功能分区,复杂模块组织, ...
Angular应用内路由(In App Route)的最佳实践
Angular官网里关于路由开发的最佳实践指导: In Angular, the best practice is to load and configure the router in a sepa ...
nodejs 实践：express 最佳实践(六) express 自省获得所有的路由
nodejs 实践:express 最佳实践(六) express 自省获得所有的路由某些情况下,你需要知道你的应用有多少路由,这在 express 中没有方法可以.因此我这边曲线了一下,做成了一个 ...
ant design pro （三）路由和菜单
一.概述参看地址:https://pro.ant.design/docs/router-and-nav-cn 二.原文摘要路由和菜单是组织起一个应用的关键骨架,我们的脚手架提供了一些基本的工具及模 ...
mongodb数据合并设计_「时间序列数据」和MongoDB(二)-模式设计最佳实践
在上一篇博客文章时间序列数据与MongoDB:第一部分-简介中,我们介绍了时间序列数据的概念,然后介绍了一些可以用于帮助收集时间序列应用程序需求的发现问题.对这些问题的回答有助于指导支持大容量生产应用 ...
EDAS微服务应用同城容灾最佳实践
简介:大多数业务应用只要做到同城双活,就可以避免掉大多数数据中心不可用故障.本实践就是帮助大家高效.低成本地实现自己的业务应用具备同城双活容灾能力. 作者:神鱼,阿里云解决方案架构师前言上云目前已 ...
阿里巴巴数据库分库分表的最佳实践
点击▲关注 "数据和云" 给公众号标星置顶更多精彩第一时间直达 1.阿里巴巴分布式数据层发展和演变业务数据从原来的单库单表模式变成了数据被拆分到多个数据库,甚至多个表中, ...
vue svg sprite loader_Vue项最佳实践
资源 Vue-CLI 3.0:https://cli.vuejs.org/zh/guide/webpack.html vue-element-admin:https://github.com/PanJ ...
《AngularJS深度剖析与最佳实践》一1.3　创建项目
本节书摘来自华章出版社<AngularJS深度剖析与最佳实践>一书中的第1章,第1.3节,作者雪狼破狼彭洪伟,更多章节内容可以访问云栖社区"华章计算机"公众号查看 ...

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

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

1.路由

2.菜单

3.测试

Arco Pro最佳实践，路由与菜单相关推荐

最新文章

热门文章