Vue管理系统前端系列四组件拆分封装

拆分后代码
布局最外层 index 代码，使用头部，侧边栏，主内容栏组成，代码如下：

头部 index.vue 代码:

头部中引用的相关组件代码如下

折叠导航栏 hamburger 下的 index.vue 代码:

折叠导航栏 logo 下的 index.vue 代码:

侧边栏下的 index.vue代码:

系统管理

内容模块下的 index.vue代码:

状态管理中添加 app 模块
代码如下：

export default {
state: {
// 是否折叠导航栏
isCollapse: false,
// 访问页集合
mainTabs: [],
// 当前访问页名
mainTabsActiveName: ‘’,
},
getters: {
isCollapse: (state) => {
return state.isCollapse
},
},
mutations: {
toggleCollapse(state) {
state.isCollapse = !state.isCollapse
},
updateMainTabs(state, tabs) {
state.mainTabs = tabs
},
updateMainTabsActiveName(state, name) {
state.mainTabsActiveName = name
},
},
actions: {},
}
亚马逊测评 www.yisuping.com