拆分后代码
布局最外层 index 代码,使用头部,侧边栏,主内容栏组成,代码如下:
头部中引用的相关组件代码如下
折叠导航栏 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