1.首先创建一个登录页面
路由配置第一个页面打开是登录页，redirect: '/login' 重定向第一个页面
mode: 'history',是去除地址默认的#号
登录验证还没写，验证后跳转通过路由跳转
这样就可以进入后台管理系统的首页了
2.配置左边菜单栏可点击收缩，点击跳转路由
创建一个菜单配置
在home页面引入菜单配置，遍历循环菜单组件
<div v-for="(item,index) in menu" :key="index">
<Submenu v-if="item.children" :name="item.title">
<template slot="title">
<Icon :type="item.icon" />
<span>{{item.title}}</span>
</template>
<MenuItem
v-for="(obj,i) in item.children"
:key="i"
:name="obj.name"
@click.native="$router.push({name:obj.name})"
>
<Icon :type="obj.icon" />
<span>{{obj.title}}</span>
</MenuItem>
</Submenu>
<MenuItem v-else :name="item.name" @click.native="$router.push({name:item.name})">
<Icon :type="item.icon" />
<span>{{item.title}}</span>
</MenuItem>
</div>
内容部分随左边菜单栏点击而改变
iview菜单组件使用动态遍历渲染的话会导致 :active-name :open-names 属性失效
在mounted重新渲染组件就可以了，加在回调函数里面
this.$nextTick(() => {
this.$refs.side_menu.updateOpened();
this.$refs.side_menu.updateActiveName();
});
