2.记录Vue+iview组件项目登录页面及首页菜单配置

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();
    });