【原创】Vue 项目实战之主页布局

使用布局组件

home.vue

<el-container>
  <el-header>Header</el-header>
  <el-container>
    <el-aside width="200px">Aside</el-aside>
    <el-main>Main</el-main>
  </el-container>
</el-container>

• 在 element.js 中引入
  import { Button, Form, FormItem, Input, Message, Container, Header, Aside, Main } from 'element-ui';

样式

每个组件的样式名称与它同名。

通过 API 获取菜单数据

通过 axios 请求拦截器添加 token，保证拥有获取数据的权限。（预处理过程）

axios.interceptors.request.use(function (config) {
  config.headers.Authorization = sessionStorage.getItem('token');
  return config;
});

导航菜单

每个一级菜单都有不同的图标，设置：

  data () {
    return {
      menuList: [],
      iconsObj: {
        users: 'iconfont icon-user',
        rights: 'iconfont icon-tijikongjian',
        goods: 'iconfont icon-shangpin',
        orders: 'iconfont icon-danju',
        reports: 'iconfont icon-baobiao'
      }
    };
  },

<template slot="title">
              <i :class="iconsObj[menu.path]"></i>
              <span>{{ menu.authName }}</span>
            </template>

保证一个菜单展开

       <el-menu
          :unique-opened="true"
        >

或

       <el-menu unique-opened >

重置样式

el-menu 和 el-aside 中的样式影响到了一些效果，可以在 style 中写样式修改：

.el-aside {
  background-color: #333744;
  overflow: hidden;
  .el-menu {
    border-right: none;
  }
}

侧边栏展开与收缩

• 将展开、收缩动态绑定
• 关闭折叠的动画效果

      <el-menu
        :collapse="isCollapse"
        :collapse-transition="false"
      >

• 动态赋予侧边栏宽度

  <el-aside :width="isCollapse ? '64px' : '200px'">

设置欢迎页面

进入到 home 组件之后，默认跳到欢迎页面 welcome。

• 定义 welcome 组件
• 将 welcome 定义为 home 组件的子组件。
• 访问 home 时重定向到 welcome。
• 在 main 区间设置路由占位符。
  router.js

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

 <el-main>
        <router-view></router-view>
      </el-main>

将左侧菜单修改为路由链接

在 element ui 中有一个 router 属性，表示是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转。