U 软件已上传的源码包 共享给未上传的

he wei

2025-03-13 ec8d9f802eac6841165425b228ef56474636fa9a

 docs/develop/router.md

@@ -3,9 +3,9 @@
lang: zh-CN
---
# 路由和菜单
路由和菜单是组织起到一个应用的关键骨架作用，Vue Antd Admin 使用 [vue-router](https://router.vuejs.org/zh/) 来配置和管理我们的路由和菜单。
路由和菜单起到组织一个应用的关键骨架的作用，Vue Antd Admin 使用 [vue-router](https://router.vuejs.org/zh/) 来配置和管理我们的路由和菜单。
## 基本结构
得益于 vue-router 路由配置的可扩展性，Vue Antd Admin 通过结合 router 配置文件、基本算法及 [menu.js]() 菜单生成工具，搭建了路由和菜单的基本框架，主要涉及以下几个模块/功能：
得益于 vue-router 路由配置的可扩展性，Vue Antd Admin 通过结合 router 配置文件、基本算法及 [menu.js](https://github.com/iczer/vue-antd-admin/blob/master/src/components/menu/menu.js) 菜单生成工具，搭建了路由和菜单的基本框架，主要涉及以下几个模块/功能：

|功能        |配置                            |
|:----------|:-------------------------------|
@@ -17,9 +17,8 @@
## 路由
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 和 page，它们将在生成菜单和页头时发挥作用。配置示例如下：
```js {8,14}
import Router from 'vue-router'
export default new Router({
```js {7,13}
const options = {
  routes: [{
    path: '/',
    name: '首页',
@@ -45,9 +44,9 @@
      }]
    }]
  }]
})
}
```
完整配置示例，请查看 [router/index.js](https://github.com/iczer/vue-antd-admin/blob/master/src/router/index.js)
完整配置示例，请查看 [src/router/config.js](https://github.com/iczer/vue-antd-admin/blob/master/src/router/config.js)

## 菜单
Admin 系统的菜单直接通过路由配置生成，路由属性和菜单功能对应关系如下
@@ -107,9 +106,9 @@
更多细节可查看 [components/menu/menu.js](https://github.com/iczer/vue-antd-admin/blob/master/src/components/menu/menu.js)

## 面包屑
面包屑由 [PageHeader](https://github.com/iczer/vue-antd-admin/blob/master/src/components/page/PageHeader.vue) 实现，PageLayout 组件会从当前页面路由提取面包屑配置（如未设置，则从当前路由逐级提取路由名称生成面包屑）。所以只要页面中使用了 PageLayout 布局或者它的父级组件使用了 PageLayout 布局，面包屑都将自动生成。  
面包屑由 [PageHeader](https://github.com/iczer/vue-antd-admin/blob/master/src/components/page/PageHeader.vue) 实现，PageLayout 组件会从当前页面路由提取面包屑配置（如未设置，则根据当前路由层次关系生成面包屑）。所以只要页面中使用了 PageLayout 布局或者它的父级组件使用了 PageLayout 布局，面包屑都将自动生成。  

当然，如果你想在某个页面自定义面包屑配置，只需在对应的路由元数据 meta 中定义 page.breadcrumb 属性即可。Vue Antd Admin 会优先使用路由元数据 meta 中定义的面包屑配置。  
当然，如果你想在某个页面自定义面包屑，只需在对应的路由元数据 meta 中定义 page.breadcrumb 属性即可。Vue Antd Admin 将会优先使用路由元数据 meta 中定义的面包屑配置。  

比如，想自定义工作台页面面包屑，可以在工作台的 route 配置中如下设置：
```jsx {5,6,7}
@@ -126,7 +125,7 @@
```
更多细节可查看 [layouts/PageLayout.vue#L55](https://github.com/iczer/vue-antd-admin/blob/master/src/layouts/PageLayout.vue#L55)
## 页面标题
页面标题的实现方式与面包屑基本一致，也是由 PageLayout 组件从当前页面路由提取标题（如未设置，则提取当前路由名称作为标题），然后自动注入的。 
页面标题的实现方式与面包屑基本一致，也是由 PageLayout 组件从当前页面路由提取标题（如未设置，则提取当前路由名称作为标题）。 
 
如果你想自定义页面标题，在页面对应的路由元数据 meta 中定义 page.title 属性即可，如下示例，定义了工作台页面的标题：
```jsx {5,6,7}