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、在零碎权限表外面增加菜单
在零碎权限表外面增加菜单权限，而后将其赋于对应的角色。