Router 导航路由

基础用法

Router 导航路由 - 图1

  1. {
  2.   "type": "router",
  3.   "resources": {
  4.     "routerRes": {
  5.       "api": {
  6.         "prefix": "https://easy-mock.com/mock/5a0023effbbb09615044cb82/",
  7.         "read": "read"
  8.       },
  9.       "fields": {
  10.         "testDate": {
  11.           "type": "date",
  12.           "label": "日期"
  13.         },
  14.         "testSwitch": {
  15.           "type": "switch",
  16.           "label": "开关"
  17.         }
  18.       }
  19.     }
  20.   },
  21.   "router": {
  22.     "routes": [{
  23.       "path": "",
  24.       "name": "首页",
  25.       "block": "formEditAll",
  26.       "meta": {
  27.         "icon": "menu"
  28.       }
  29.     }, {
  30.       "path": "/list",
  31.       "name": "列表页",
  32.       "block": "listComponent"
  33.     }]
  34.   },
  35.   "blocks": {
  36.     "formEditAll": {
  37.       "type": "form",
  38.       "resource": "routerRes",
  39.       "ctx": "edit",
  40.       "style": {
  41.         "width": "50%"
  42.       },
  43.       "data": {
  44.         "testRadio": "c"
  45.       },
  46.       "events": {
  47.         "init": "@read",
  48.         "submit": "@validate @update"
  49.       },
  50.       "operations": {
  51.         "submit": {
  52.           "type": "button",
  53.           "event": "submit",
  54.           "label": "提交",
  55.           "props": {
  56.             "type": "primary"
  57.           }
  58.         }
  59.       }
  60.     },
  61.     "listComponent": {
  62.       "type": "component",
  63.       "options": {
  64.         "is": "div",
  65.         "text": "我是插进来的TEXT内容",
  66.         "html": "<h3>我是插进来的HTML内容</h3>"
  67.       }
  68.     }
  69.   }
  70. }

显示配置

slotBlocks 配置

菜单头部slot block

配置子block的slot为menuTop，可以插入在菜单头部

Router 导航路由 - 图2

  1. {
  2.   "type": "router",
  3.   "router": {
  4.     "routes": [{
  5.       "path": "",
  6.       "name": "首页",
  7.       "block": "listComponent",
  8.       "meta": {
  9.         "icon": "menu"
  10.       }
  11.     }]
  12.   },
  13.   "blocks": {
  14.     "listComponent": {
  15.       "type": "component",
  16.       "options": {
  17.         "is": "div",
  18.         "text": "我是插进来的TEXT内容",
  19.         "html": "<h3>我是插进来的HTML内容</h3>"
  20.       }
  21.     },
  22.     "title1": {
  23.       "type": "component",
  24.       "options": {
  25.         "is": "h3",
  26.         "text": "AMS系统"
  27.       },
  28.       "style": {
  29.         "color": "#fff",
  30.         "text-align": "center"
  31.       },
  32.       "slot": "menuTop"
  33.     }
  34.   }
  35. }

显示配置

菜单底部slot block

配置子block的slot为menuBottom，可以插入在菜单底部

Router 导航路由 - 图3

  1. {
  2.   "type": "router",
  3.   "router": {
  4.     "routes": [{
  5.       "path": "",
  6.       "name": "首页",
  7.       "block": "listComponent",
  8.       "meta": {
  9.         "icon": "menu"
  10.       }
  11.     }, {
  12.       "path": "/menu1",
  13.       "name": "菜单一",
  14.       "meta": {
  15.         "icon": "user-solid"
  16.       },
  17.       "children": [{
  18.         "name": "子菜单",
  19.         "path": "path1_0",
  20.         "block": "listComponent"
  21.       }]
  22.     }, {
  23.       "path": "/menu2",
  24.       "name": "菜单二",
  25.       "block": "listComponent",
  26.       "meta": {
  27.         "icon": "star-on"
  28.       }
  29.     }, {
  30.       "path": "/menu3",
  31.       "name": "菜单三",
  32.       "block": "listComponent",
  33.       "meta": {
  34.         "icon": "s-help"
  35.       }
  36.     }]
  37.   },
  38.   "blocks": {
  39.     "listComponent": {
  40.       "type": "component",
  41.       "options": {
  42.         "is": "div",
  43.         "text": "我是插进来的TEXT内容",
  44.         "html": "<h3>我是插进来的HTML内容</h3>"
  45.       }
  46.     },
  47.     "menuBottomtext": {
  48.       "type": "component",
  49.       "options": {
  50.         "is": "div",
  51.         "text": "Copyright © 2008-2019 vip.com"
  52.       },
  53.       "style": {
  54.         "color": "#aaa",
  55.         "padding": "10px",
  56.         "margin-top": "100px",
  57.         "font-size": "12px"
  58.       },
  59.       "slot": "menuBottom"
  60.     }
  61.   }
  62. }

显示配置

导航的位置slot block

配置子block的slot为nav，可以插入在导航的位置。比如下面例子插入了两个操作按钮“反馈”和“帮助”。

Router 导航路由 - 图4

  1. {
  2.   "type": "router",
  3.   "router": {
  4.     "routes": [{
  5.       "path": "",
  6.       "name": "首页",
  7.       "block": "listComponent",
  8.       "meta": {
  9.         "icon": "menu"
  10.       }
  11.     }]
  12.   },
  13.   "blocks": {
  14.     "listComponent": {
  15.       "type": "component",
  16.       "options": {
  17.         "is": "div",
  18.         "text": "我是插进来的TEXT内容",
  19.         "html": "<h3>我是插进来的HTML内容</h3>"
  20.       }
  21.     },
  22.     "title1": {
  23.       "type": "component",
  24.       "options": {
  25.         "is": "h3",
  26.         "text": "AMS系统"
  27.       },
  28.       "style": {
  29.         "color": "#fff",
  30.         "text-align": "center"
  31.       },
  32.       "slot": "menuTop"
  33.     },
  34.     "navRouterTitle": {
  35.       "type": "component",
  36.       "options": {
  37.         "is": "div"
  38.       },
  39.       "operations": {
  40.         "feedback": {
  41.           "type": "button",
  42.           "label": "反馈",
  43.           "style": {
  44.             "margin-top": "5px",
  45.             "margin-right": "15px"
  46.           },
  47.           "props": {
  48.             "type": "text",
  49.             "icon": "el-icon-document",
  50.             "size": "large"
  51.           }
  52.         },
  53.         "help": {
  54.           "type": "button",
  55.           "label": "帮助",
  56.           "style": {
  57.             "margin-top": "5px"
  58.           },
  59.           "props": {
  60.             "type": "text",
  61.             "icon": "el-icon-question",
  62.             "size": "large"
  63.           }
  64.         }
  65.       },
  66.       "actions": {
  67.         "feedback": function() {
  68.           window.location.href = "https://github.com/vipshop/ams/issues"
  69.         },
  70.         "help": function() {
  71.           window.location.href = "https://github.com/vipshop/ams"
  72.         }
  73.       },
  74.       "slot": "nav"
  75.     }
  76.   }
  77. }

显示配置

在线实验室

Router 导航路由 - 图5

Router 导航路由 - 图6

参数列表

参数说明可选值 | 类型必填
typeblock类型string是
datadata可以指定当前block的初始数据，结构和fields保持一致null | object否
config全局配置，和通过ams.config配置效果一致null | object否
style可以设置区块的外层样式null | object否
events可以配置对应事件的处理actionsnull | object否
actions可以配置具体的action处理函数null | object否
operations可以配置operation操作null | object否
blocks可以配置多个子blocknull | object否
render默认为false，配置为true则自动在body内渲染，如传入string则渲染在指定的querySelector上boolean | string否
props会透传至底层的element-ui组件作为props属性，或者是原生dom元素的属性null | object否
optionsblock特有配置null | object否
router可以配置菜单和页面路由null | object否

结构

  1. export interface Route {
  2.   path: string, // 路由地址
  3.   name: string, // 路由名
  4.   block?: string, // 渲染block名
  5.   redirect?: string, // 重定向地址
  6.   children?: Array<Route>, // 子路由
  7.   meta?: {
  8.     icon?: string, // 对应的图标：参考http://element-cn.eleme.io/#/zh-CN/component/icon，如 'info' 对应 'el-icon-info'
  9.     hasMenu?: boolean, // 是否显示导航菜单面包屑，默认true
  10.     hidden?: boolean, // 是否在左侧导航菜单显示，默认false
  11.     roles?: Array<string>, // 路由权限角色，data内包含对应的角色才可见改路由
  12.     noRedirect?: boolean, // 对应面包屑是否禁用跳转，默认为false
  13.   }
  14. }
  15. export interface RouterBlock {
  16.     type: 'router',
  17.     router: {
  18.       mode?: "hash" | "history" | "abstract",
  19.       base?: "string", // 更多选项参考：https://router.vuejs.org/zh/api/#linkexactactiveclass
  20.       showMenu?: true | false,   // 默认为true, false时隐藏所有路由菜单  0.8.6+支持
  21.       routes: Array<Route>,
  22.       defaultBreadcrumb: true // 默认为true，会把首个route作为默认首页加到所有面包屑，设置为false禁用此行为， 0.7.5+支持
  23.     },
  24.     data?: {
  25.       roles?: Array<string> // 当前用户权限角色，用户需要包含路由要求的roles权限才能看到对应菜单
  26.     },
  27.     on?: {
  28.     // 这里可以在生成router实例时注册事件，如beforeEach，详见 [ Router 实例方法 ](https://router.vuejs.org/zh/api/#router-%E5%AE%9E%E4%BE%8B%E6%96%B9%E6%B3%95)
  29.     }
  30. }