{{userInfo.nickname}}
用户设置 退出登录

{{wikiTitle}}

新增页面

基础介绍

CRMEB后台管理是基于vue2技术栈进行开发搭建的

Vue Router 使用的是v3版本,mode为history模式
如需修改 mode 请在src/setting.js中修改routerMode

新建页面

新建路由

image.png

根据目录结构,需要在src/router/modules中对应模块中,添加对应路由(如有其他模块建议另行创建)

实例中:该页面的访问路径(路由地址)为 /admin/order/list

// 实例  该路由创建成功后 访问路径为 /admin/order/list

import BasicLayout from '@/components/main';

const pre = 'order_';

export default {
  path: '/admin/order',
  name: 'order',
  header: 'order',
  redirect: {
    name: `${pre}list`,
  },
  component: BasicLayout,   // 布局组件
  children: [
    {
      path: 'list',
      name: `${pre}list`,
      meta: {
        auth: ['admin-order-storeOrder-index'],  // 路由权限
        title: '订单管理',
      },
      component: () => import('@/pages/order/orderList/index'),  // 动态引入 对应pages中文件路径
    }
  ],
};

注意

如果你添加的是新建模块 指:在src/router/modules中新建路由文件

你还需要再 src/router/routers.js中进行引入

在上方引入并在下方使用

创建文件

src/pages下创建模块文件 例如test,模块中在添加对应的功能文件

image.png

添加规则

运行起后台admin项目找到对应目录 设置/权限管理/权限规则

image.png

image.png

如果是创建一级目录点击图中1添加规则,如果是在对应一级模块下创建二级或三级目录 根据列表及展开项,点击后方2添加子菜单进行添加。

添加子菜单注意事项

image.png

必填项

按钮名称、路由地址为必填项(如果创建一级目录,需添加对应图片,可点击图片后方icon进行选择)

路由

路由地址参加第一步中 路由创建后的路由地址进行添加 例如:/admin/user/list

权限

权限标识参考第一部中 meta中auth 填写的权限规则

其他问题

1.如果需要添加规则效验可在 src/router/index.js中进行添加具体使用方法可参考官方示例导航守卫

2.如果按上面布置添加完成页面却出现 该页面不存在时。请检查路由文件及权限规则中路径添加是否正确。

3.如果出现 因权限无法访问问题

  • 请检查规则添加的权限与路由文件中的权限规则是否一致
  • 检查 设置/角色管理中的菜单权限
{{cateWiki.like_num}}人点赞
0人点赞
评论({{cateWiki.comment_num}}) {{commentWhere.order ? '评论从旧到新':'评论从新到旧'}} {{cateWiki.page_view_num}}人看过该文档
评论(0) {{commentWhere.order ? '评论从旧到新':'评论从新到旧'}} 314人看过该文档
评论
{{item.user ? item.user.nickname : ''}} (自评)
{{item.content}}
{{item.create_time}} 删除
{{item.like ? item.like.like_num : 0}} {{replyIndex == index ? '取消回复' : '回复'}}
评论
{{items.user ? items.user.nickname : '暂无昵称'}} (自评)
{{items.content}}
{{items.create_time}} 删除
{{items.like ? items.like.like_num : 0}} {{replyIndexJ == (index+'|'+indexJ) ? '取消回复' : '回复'}}
评论
目录
  • {{item}}