|
|
|
|
@ -3,20 +3,20 @@ title: 路由和菜单 |
|
|
|
|
lang: zh-CN |
|
|
|
|
--- |
|
|
|
|
# 路由和菜单 |
|
|
|
|
路由和菜单是组织起到一个应用的关键骨架作用，我们使用 [vue-router](https://router.vuejs.org/zh/) 来配置和管理我们的路由和菜单。 |
|
|
|
|
路由和菜单是组织起到一个应用的关键骨架作用，Vue Antd Admin 使用 [vue-router](https://router.vuejs.org/zh/) 来配置和管理我们的路由和菜单。 |
|
|
|
|
## 基本结构 |
|
|
|
|
得益于 vue-router 路由配置的可扩展性，Admin 通过结合 router 配置文件、基本算法及 [menu]() 自动生成工具，搭建了路由和菜单的基本框架，主要涉及以下几个模块/功能： |
|
|
|
|
得益于 vue-router 路由配置的可扩展性，Vue Antd Admin 通过结合 router 配置文件、基本算法及 [menu.js]() 菜单生成工具，搭建了路由和菜单的基本框架，主要涉及以下几个模块/功能： |
|
|
|
|
|
|
|
|
|
|功能 |配置 | |
|
|
|
|
|:----------|:-------------------------------| |
|
|
|
|
|*路由管理* |通过 [vue-router](https://router.vuejs.org/zh/) 的路由规则进行配置| |
|
|
|
|
|*菜单生成* |根据路由配置自动生成菜单，菜单项名称、菜单图标和菜单层级等全部可以通过路由配置进行自定义| |
|
|
|
|
|*面包屑* |布局组件 [PageLayout](https://github.com/iczer/vue-antd-admin/blob/master/src/layouts/PageLayout.vue) 提取当前页面路由，并根据路由属性自动生成面包屑，当然你也可以在页面定义面包屑| |
|
|
|
|
|*页面标题* |同面包屑，视图组件 [PageView](https://github.com/iczer/vue-antd-admin/blob/master/src/layouts/PageView.vue) 根据提取到的当前页面路由名称自动设置页面标题，你也同样可以在页面定义标题| |
|
|
|
|
|*路由管理* |通过 [vue-router](https://router.vuejs.org/zh/) 的路由规则进行管理和配置| |
|
|
|
|
|*菜单生成* |根据路由配置自动生成菜单，菜单项名称、图标和层级等全部可以通过路由配置进行自定义| |
|
|
|
|
|*面包屑* |布局组件 [PageLayout](https://github.com/iczer/vue-antd-admin/blob/master/src/layouts/PageLayout.vue) 提取当前页面路由，并根据当前路由层次关系自动生成面包屑，当然你也可以自定义面包屑| |
|
|
|
|
|*页面标题* |同面包屑，布局组件 [PageLayout](https://github.com/iczer/vue-antd-admin/blob/master/src/layouts/PageLayout.vue) 根据提取到的当前页面的路由名称设置为页面标题，你也同样可以自定义标题| |
|
|
|
|
|
|
|
|
|
## 路由 |
|
|
|
|
Vue Antd Admin 的路由配置完全遵循 vue-router 的 [routes 配置规则](https://router.vuejs.org/zh/api/#routes)。 |
|
|
|
|
另外我们还在 routes 的元数据属性 [meta](https://router.vuejs.org/zh/guide/advanced/meta.html#%E8%B7%AF%E7%94%B1%E5%85%83%E4%BF%A1%E6%81%AF) 中注入了两个属性 icon 和 invisible，它们将在生成菜单时发挥作用。配置示例如下： |
|
|
|
|
另外我们还在 routes 的元数据属性 [meta](https://router.vuejs.org/zh/guide/advanced/meta.html#%E8%B7%AF%E7%94%B1%E5%85%83%E4%BF%A1%E6%81%AF) 中注入了三个属性 icon、invisible 和 page，它们将在生成菜单和页头时发挥作用。配置示例如下： |
|
|
|
|
```js {8,14} |
|
|
|
|
import Router from 'vue-router' |
|
|
|
|
export default new Router({ |
|
|
|
|
@ -56,8 +56,9 @@ Admin 系统的菜单直接通过路由配置生成，路由属性和菜单功 |
|
|
|
|
|:-----------------|:-------| |
|
|
|
|
|**name** |菜单名称 | |
|
|
|
|
|**path** |点击菜单时的跳转链接| |
|
|
|
|
|**meta.icon** |菜单图标，图标使用 ant-design-vue 图标库，对应 [Icon](https://www.antdv.com/components/icon-cn/#API) 组件 的 type 属性| |
|
|
|
|
|**meta.invisible**|是否不将此路由项渲染为菜单项，默认false；如设置为 true，则生成菜单时将忽略此路由项| |
|
|
|
|
|**meta.icon** |菜单图标，图标使用 ant-design-vue 图标库，对应 [Icon](https://www.antdv.com/components/icon-cn/#API) 组件 的 type 属性| |
|
|
|
|
|**meta.invisible**|是否不将此路由项渲染为菜单项，默认false；如设置为 true，则生成菜单时将忽略此路由| |
|
|
|
|
|
|
|
|
|
假如使用上面 [路由](#路由) 文档中的 [配置示例](#路由)，将会生成如下菜单： |
|
|
|
|
|
|
|
|
|
 |
|
|
|
|
|
iczer
4 years ago
committed by
GitHub