关于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、在零碎权限表外面增加菜单

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