# frame

**Repository Path**: xfZHA/frame

## Basic Information

- **Project Name**: frame
- **Description**: 框架
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-02-07
- **Last Updated**: 2023-06-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 添加菜单
在view目录下添加页面，并后端加载路由，本地配置路径：@/views/login/menu.js
### 添加跳转网页链接
路由的path设置为url地址，举例：

```javascript
let route = {
  path: '/home/product',
  title: 'product',
  key: 'product',
  iconcls: 'home',
  url: 'http://203.57.6.232:8018/sltAuth?userId=17312121172&loginType=web',
  children: []
}
```
## 单点登录
输入系统地址进入到auth.vue摇摆页，在摇摆页中  存储接口返回的token，用户信息，菜单。然后添加动态路由，进入到第一个菜单页。

## 权限控制
route.js里判断路由地址如果是在路由白名单（例如:/auth）里，或者在动态路由里,就进入对应页面，否则进入404页面

## layout组件化
layout通过hx-layout组件是实现，详情如下，code地址：@/components/layout

### 属性

- menuData 菜单路由数据(必传)

```js

/**
 * Note: 路由配置项
 * 
 * hidden: true                     // 当设置 true 的时候该路由不会再侧边栏出现 如401，login等页面，或者如一些编辑页面/edit/1
 * key                              // 路由的名字，一定要填写，都则菜单会出现各种问题
 * title                            // 设置该路由在侧边栏和面包屑中展示的名字
 * iconcls                          // 设置该路由的图标
 *
 */
menuData = [
  {
    path: '/',
    component: 'BasicLayout',
    redirect: '/productList',
    title: '产品管理',
    key: 'menu3',
    iconcls: 'home',
    children: [
      {
        key: 'productList',
        path: '/productList',
        redirect: '/productList/addProduct',
        url:'http://www.baidu.com',
        name: '产品列表',
        component: 'huaxinFinance/financialProduct/bank/productList',
        title: '产品列表', iconcls: 'home', children: [
          {
            key: 'addProduct',
            path: '/productList/addProduct',
            redirect: '/productList/addProduct',
            name: '新增产品',
            hidden: true,
            component: 'huaxinFinance/financialProduct/bank/addProduct',
            title: '新增产品', iconcls: 'form-outlined', children: []
          },
          
        ]
      },
      {
        key: 'productTypes',
        path: '/productTypes',
        redirect: '/productTypes',
        name: '产品类型',
        component: 'huaxinFinance/financialProduct/bank/productTypes',
        title: '产品类型', iconcls: 'home', children: []
      },
  


    ]

  },
]
```

- ptConfigData 平台配置数据  （必传） 
```js
ptConfigData={
  // 系统图标
  systemIcon:'' 
}
```
- userInfo 用户信息
```js
userInfo={
  userName:'用户名称'
}
```

### 方法

- loginOut() 登出回调
- menuClick(path)  点击回调，跳转路由
    - path  路由地址

### 插槽

- header 可传入一个容器自定义 header，不传则采用默认内容
- left 可传入一个容器自定义 sidebar，不传则采用默认内容
- main 可传入一个容器自定义 main，不传则采用默认内容