[JavaScript知识库]微人事项目学习笔记（3）- Home页制作

1 Home和Title页制作

布局参考

• 布局
  

• 右面的菜单
  

• 注销
  
  

2 左边导航菜单

• 实现在main的页面显示，而不是整个页面替换
  
  
  

• 根据index跳转
  
  

• 自动跳转
  
  el-menu增加 router属性，不用写点击事件
  

2 菜单项接口

2.1 服务端菜单接口

2.2 前端展示菜单

菜单项数据加载后，在前端存放的地方：

1. sessionStorage,别人可以看到，不是很安全
2. localStorage，别人可以看到，不是很安全
3. vuex,所有的vue页面可以用

2.2.1 安装配置vuex

2.2.2 菜单请求工具类封装

2.2.3 前端页面添加并完善菜单请求

2.3 左边导航菜单加载

菜单信息保存到了vuex（内存中），如果刷新页面，可能会丢失，使用路由导航守卫

• 全局导航守卫，类似后端的过滤器
  
  
  
  
  
  

• 安装图标库
  
  
  

2.4 页面加载问题解决

2.5 首页完善

• 添加面包屑 https://element.eleme.cn/#/zh-CN/component/breadcrumb