关于vue.js:Vue项目

vue 我的项目增加菜单

vue 是基于组件:vm 的 components，一个 vue component（或者说 vue instance，两者只有细微差别）能够看成是 view 和 model 的联合，或者更间接一点：template + model。model 的属性（props）能够在 view 中援用时赋值，model 的数据（data）能够被 view 取用。还有其余一些 view 和 model 的调用关系。
具体能够参考：https://www.jianshu.com/p/937…

所以针对于组建开发方式, 咱们能够依照如下步骤：

1、增加组建

index.js 用于记录菜单路由:

import {modName} from './vars'

/** @type {import('vue-router').RouteConfig[]} */
const routes = [
  {path: `/${modName}`,
    meta: {title: '计费', icon: 'menu', permissionTag: 'bill'},
    children: [
      {
        path: 'recharge',
        component: () => import('./views/recharge/Index.vue'),
        meta: {title: '充值治理', permissionTag: 'bill_recharge'}
      }
    ]
  }
]
export default {routes}

vars.js 是配置的路由中变量
export const modName = 'bill'

Index.vue 就是咱们的组建:component

<template>
  <ui-table-view v-bind="viewProps" v-on="viewListeners">
    <template #search>
      <el-form-item v-if="isAdmin" label="所属企业">
        <ui-ent-select v-model="searchForm.entid" @change="onSearch" />
      </el-form-item>
    </template>

    <template #actions>
      <el-button type="primary" icon="el-icon-plus" @click="onEdit()"> 充值 </el-button>
    </template>
  </ui-table-view>
</template>
<script>
export default {
  name: 'BillRecharge',
  mixins: [window.mixTableView],
  data () {
    return {
      columns: [{ type: 'selection', selectable: row => row.state},
        {label: '金额', prop: 'username'},
        {label: '发票信息', prop: 'name'},
        {label: '是否开票', prop: 'workNo', minWidth: 80},
        {label: '阐明', prop: 'phone'},
        {
          label: '操作',
          width: 210,
          fixed: 'right',
          render: (h, { row}) => this.$hBtns([// (+row.createByEntid !== 0 || +this.userData.entid === 0) &&
            {label: '设置角色', action: this.onSettingRoles},
            {label: '批改明码', action: this.onUpdatePwd},
            {label: '编辑', action: this.onEdit},
            {label: '删除', action: this.onDelete}
          ])(h, { row})
        }
      ],
      roles: []}
  },
  computed: {userData () {return this.$store.state.userData},
    isAdmin () {return this.$store.getters.isAdmin}
  },
  mounted () {},
  methods: {getInitData () {this.getData()
      this.getRoles()}
  }
}
</script>

2、增加路由

在 app/plugins/core.js 中的 moduleList 增加

3、在零碎权限表外面增加菜单

在零碎权限表外面增加菜单权限，而后将其赋于对应的角色。