caoliancun
/
vue-antd-admin-skeleton
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update router.md

Browse Source
master
iczer 5 years ago committed by GitHub
parent 49b17862fc
commit 5cbafb7fc7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 10 additions and 9 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 19
      docs/develop/router.md

19
docs/develop/router.md
Unescape View File

@ -3,20 +3,20 @@ title: 路由和菜单
lang: zh-CN 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/) 的路由规则进行配置| |*路由管理* |通过 [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) 提取当前页面路由，并根据当前路由层次关系自动生成面包屑，当然你也可以自定义面包屑|
|*页面标题* |同面包屑，视图组件 [PageView](https://github.com/iczer/vue-antd-admin/blob/master/src/layouts/PageView.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)。 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} ```js {8,14}
import Router from 'vue-router' import Router from 'vue-router'
export default new Router({ export default new Router({
@ -56,8 +56,9 @@ Admin 系统的菜单直接通过路由配置生成，路由属性和菜单功
|:-----------------|:-------| |:-----------------|:-------|
|**name** |菜单名称 | |**name** |菜单名称 |
|**path** |点击菜单时的跳转链接| |**path** |点击菜单时的跳转链接|
|**meta.icon** |菜单图标，图标使用 ant-design-vue 图标库，对应 [Icon](https://www.antdv.com/components/icon-cn/#API) 组件 的 type 属性| |**meta.icon** |菜单图标，图标使用 ant-design-vue 图标库，对应 [Icon](https://www.antdv.com/components/icon-cn/#API) 组件 的 type 属性|
|**meta.invisible**|是否不将此路由项渲染为菜单项，默认false；如设置为 true，则生成菜单时将忽略此路由项| |**meta.invisible**|是否不将此路由项渲染为菜单项，默认false；如设置为 true，则生成菜单时将忽略此路由|
假如使用上面 [路由](#路由) 文档中的 [配置示例](#路由)，将会生成如下菜单： 假如使用上面 [路由](#路由) 文档中的 [配置示例](#路由)，将会生成如下菜单：
![menu-demo](../assets/menu-demo.png) ![menu-demo](../assets/menu-demo.png)

Write Preview
Loading…
Cancel
Save