Vue项目03 电商系统 主页

🌰

ElementUI各种布局
axios
在main.js配置请求拦截器

axios.interceptors.request.use((config) => {
    //本区域是预处理登录 增加token，并且绑定一令牌[Authorization]
    config.headers.Authorization = window.sessionStorage.getItem('token')
    //挂载请求头，这样有权限的请求头就可以调用成功了
        //在最后必须return
    return config
})

生命周期函数
在组件创建时就会执行！就是调用已经自定义函数让他执行

SMZQHS(){
XXX();
}

private XXX (){

}

左侧UI渲染
使用两个v-for渲染所有的一级菜单和二级菜单
:key=”item.id”和:index=”item.id” 给标签绑定一个key和index 能够成功渲染
动态绑定一定要加【：】
自动折叠
设置一个布尔值 默认false
给折叠按钮绑定一个点击事件
点击一下 把布尔值取反
再给侧边栏 el-aside 使用三目运算 来改变宽度*如果是false就是200px如果是true就64px
实现首页的路由重定向（可以在同一个vue页内嵌套别的vue）
在index导入内层vue，并在要嵌套的主页面添加一个children数组，地址为当前目录下的/welecome ，组件是导入的vue文件的小名
并在主页面添加一个重定向（当访问home时，将会被重定向到welcome，但是内容是Home包裹着welcome）

{
               path: '/home',
               redirect: '/welcome',
               component: Home,
               children: [{ path: '/welcome', component: Welcome }],
           },

左侧菜单添加路由功能
具体使用饿了么UI提供的属性 开启路由模式
所跳转的地址的是根据index值决定