后台管理系统-篇三

 

1：Vuex里面的数据保存在内存中，刷新了之后可能会消失

----store index 封装一个函数 在main里面调用（每一次刷新都会执行）

setupStore{

 store.dispatch('login/loadLocalLogin')

}

loadLocalLogin({commit}){

dispathch分发actions里面的数据

从本地获取token/userInfo/userMenus 没有的话就commit mutations里面的方法修改state里面的数据

2：布署首页

使用UI组件库-container布局

模板里面遍历 item in 

获取userInfo  $store.state.login.userMenus-----放在计算属性

const userMenus=store

 -----点击NavHeader里面的点击事件 让NavMenu里面的导航栏隐藏解决方案

1：事件总线mit emitter.on emitter.emit

2:共同的父组件 Main.vue(父组件有展示的宽度）组件间通信

Props 父传子

emit @子传父

------动态路由 权限控制

路由注册

1：写死，注册所有的

2：不同的角色注册不同的路由

admin:[{},{}]

user:[{}]

登录->userInfo->role.name->动态的加载数组[]->main.routes

缺点 新增角色:[{}]->需要修改前端代码->重新部署

3:拿到菜单后->动态生成路由映射

菜单 -> url->路由->path->component

角色管理->main/role->path->component

 

 点击

10个页面 10个path->page(component)

 

 使用coderwhy npm工具来完成自动配置

根据菜单的url动态加载 对应组件

---------------------------------------------

not found页面------/:pathMatch(.*)*

main 里面的 children: 获取菜单userMenus（导航守卫里面、login/login.ts）

userMenus=>routes

type===2 真正添加映射关系

utils map-menus.ts

import {RouteRecordRaw} from 'vue-router

function mapMenusToRoutes(userMenus:any[]):route:RouteRecordRaw[]{

const routes:RouteRecordRaw[ ]=[ ]

//先加载所有的routes

const allRoutes:RouteRecordRaw[ ]=[ ]

const routeFIles=require.context('../router/main',true,/\.ts/)

//根据菜单获取需要添加的routes

}

父路由记录是指父路由配置的名字->name