iview opend-name

<template>
  <div>
    <Layout>
      <Sider hide-trigger
             ref="side1"
             :style="{position: 'fixed',  height: '100vh', left: 0, overflow: 'auto',background: '#fff',top:'60px'}">
        <Menu theme="light" width="auto" ref="user"
              :active-name="user" :class="menuitemClasses" :open-names="['1']">
          <Submenu name="1">
            <template slot="title">
              <i class="iconfont icon-home"></i>
              利冲
            </template>
            <MenuItem name="lichong-guanli" to="/lichong/lichong-guanli"><div @click="goon">利冲管理</div></MenuItem>
            <MenuItem name="lichong-chuanjian" to="/lichong/lichong-chuanjian"><div @click="goon">利冲创建</div></MenuItem>
            <MenuItem name="lichong-qianpi" to="/lichong/lichong-qianpi"><div @click="goon">利冲签批</div></MenuItem>
            <MenuItem name="lichong-daifankui" to="/lichong/lichong-daifankui"><div @click="goon">利冲待反馈</div></MenuItem>
          </Submenu>
        </Menu>
      </Sider>
      <Layout
        :style="{margin: '88px 20px 0',marginLeft: '200px',marginTop:'0px',marginRight:0,width:'100%',border:0,overflowY:'hidden'}">
        <Breadcrumb :style="{background:'#fff',marginBottom:'20px',paddingLeft:'20px',
        height:'49px',borderBottom:'1px solid rgba(233, 233, 233, 1)',lineHeight:'49px',
        position: 'fixed',width: '100%',zIndex:100,
        }" separator="/">
          <BreadcrumbItem to="/lichong/lichong">利冲</BreadcrumbItem>
          <BreadcrumbItem :to="breadcrumb">{{flag}}</BreadcrumbItem>
        </Breadcrumb>
        <Content
          :style="{ minHeight: '980px', background: 'rgb(245, 247, 249)',margin:'0 15px',position:'relative',top:'60px'}">
          <router-view></router-view>
          <div style="height: 100px;"></div>
        </Content>
      </Layout>
    </Layout>
  </div>
</template>

<script>
  let flags = {
    "lichong-guanli": "利冲管理",
    'lichong-chuanjian': '利冲创建',
    'lichong-chuanjian1': '利冲创建',
    'lichong-qianpi': '利冲签批',
    'lichong-daifankui': '利冲待反馈',
    'lichong-detail': '利冲详情',
    'lichong-shenhe': '利冲审核',
    'lichong-anjian': '案件详情'
  }
  export default {
    name: "lichong",
    data() {
      return {
        flag: "利冲管理",
        breadcrumb: '/lichong-guanli',
        isCollapsed: false,
        user: "lichong-guanli"
      }
    },
    methods: {
      collapsedSider() {
        this.$refs.side1.toggleCollapse()
      },
      goon(){
        document.body.scrollTop = document.documentElement.scrollTop = 0;
      },
      menuHandle () {
        let pathObj = {
          'lichong-guanli':['lichong-guanli','lichong-detail','lichong-anjian'],
          'lichong-chuanjian':['lichong-chuanjian','lichong-chuanjian1'],
          'lichong-qianpi':['lichong-qianpi','lichong-shenhe'],
          'lichong-daifankui':['lichong-daifankui']
        }
        let menuactive = this.$route.path.split('/')[2]
        for (let item in pathObj) {
          if (pathObj[item].indexOf(menuactive) != -1) {
            this.user = item
          }
        }
      },
      routerChange () {
        this.$nextTick(() => {
          this.breadcrumb = this.$route.path.split('/')[2]
          this.flag = flags[this.$route.path.split('/')[2]]
          this.menuHandle()
          this.$refs.user.updateActiveName()
        })
      },



    },
    computed: {
      rotateIcon() {
        return [
          'menu-icon',
          this.isCollapsed ? 'rotate-icon' : ''
        ];
      },
      menuitemClasses() {
        return [
          'menu-item',
          this.isCollapsed ? 'collapsed-menu' : ''
        ]
      }
    },
    watch: {
      $route() {
        this.routerChange()
      }
    },
    mounted() {
      this.$nextTick(() => {
       this.routerChange()
      })
    }
  }
</script>

<style scoped>
  .layout {
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
  }

  .layout-logo {
    width: 100px;
    height: 30px;
    background: #5b6270;
    border-radius: 3px;
    float: left;
    position: relative;
    top: 15px;
    left: 20px;
  }

  .layout-nav {
    width: 420px;
    margin: 0 auto;
    margin-right: 20px;
  }

</style>