基于Vue+ElementUI的商场后台管理系统day4

4.2 主页的实现

4.2.1 home页面的整体布局的实现

• 参照elementUI中的布局

  
  
  

• 导航菜单

  
  
  
• 项目优化
  组件按需引入的代码封装
  
  

4.2.2 通过axios请求拦截器添加token,保证拥有获取数据的权限

• API文档的要求
  
  
  
  关于axios的请求拦截器
  它是一个发起请求前的预处理过程
  
  

4.2.3 发起请求获取左侧导航菜单栏的数据

• 渲染页面用双层for循环
  外层循环
  vue中的：表示是动态的值

  
  
  
  
  

  内层循环

  
  
  

• 对于一级菜单每个菜单前面对应的图标都是不一样的，在data中定义一个数组存放id与对应的图标，循环时动态修改iconfont

  
  
  
  
  
  
• 实现折叠菜单栏
• 实现首页路由的重定向，即登录成功后url是/welcome
  新建一个welcome.vue组件作为home的子组件
  
  
  
  router-view标签的使用
  
  
  
  
  
  
  了解router-view看这篇文章
• 实现二级菜单跳转，把二级菜单改成路由链接
  不用每个都加router-link,通过elementUI的router参数
  添加home的子路由形式显示对应的页面
  路由占位符实现了指定在main内容区域显示，而不是在新的页面。