AntDesign vue study notes (c) the use of nested routing

This project is currently structured as follows

1, Login page = "MainFrm page =" MainFrm menu left portion, a right side display area can be switched subpages (not used Iframe).

2, when you click the left side of the menus, sub-right of the page with the switch.

The key code is implemented as follows
1, modified in the router index.js

export default new Router({
  routes: [
    {
      path: '/',
      name: 'login' ,
      component: Login
    }
    {
      path: '/MainFrm',
      name: 'Home' ,
      component: MainFrm,
      children: [
        {
          path: '/StudentClass',
          name: 'classes' ,
          component: StudentClass
        },
        {
          path: '/Student',
          name: 'student' ,
          component: Student
        }
      ]
    }
  ]
})

2, the following modifications MainFrm code, a-layout to layout antdesign writing, a-menu menu to antdesign.

<template>
  <a-layout id="components-layout-demo-top-side-2">
    <a-layout-header class="header" style="background: rgb(9, 154, 135);">
      <div class="logo" style="background:url(/static/img/tigongshang.png)" />
      <div style="float:right">
        <a-avatar style="backgroundColor:#ffffff; color:#888888;" icon="user" />
        <a-dropdown>
          <a class="ant-dropdown-link" href="#" style="color:#ffffff;text-decoration: blink;">
            Administrator name
            <a-icon type="down"/>
          </a>
          <a-menu slot="overlay">
            <a-menu-item>
              <a href="javascript:;">修改密码</a>
            </a-menu-item>
            <a-menu-item>
              <a href="javascript:;">退出登录</a>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </div>
    </a-layout-header>
    <a-layout>
      <a-layout-sider width="200" :style="{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0, background: '#fff' }">
        <a-menu mode="inline" :defaultSelectedKeys="['1']" :defaultOpenKeys="['sub2','sub3']" :style="{ height: '100%', borderRight: 0 }">
          <a-menu-item key="1">
            <a-icon type="home"/>
            <span class="nav-text">班级</span>
            <a-menu-item key="2" @click="menu('StudentClass')">班级</a-menu-item>
          </a-menu-item>
          <a-sub-menu key="sub2">
            <span slot="title">
              <a-icon type="database"/>学生
            </span>
            <a-menu-item key="2" @click="menu('Student ') " </student>a-menu-item>
          </a-sub-menu>
        </a-menu>
      </a-layout-sider>
      <a-layout :style="{ marginLeft:'200px', padding:'24px 24px 0px' }">
        <a-layout-content :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px', overflow: 'initial'}">
          <router-view></router-view>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-layout>
</template>

3, the following modifications export default

export default {
  name: 'MainFrm',
  data () {
    return {
      collapsed: false,
      page: Student
    }
  },
  methods: {
    menu (s) {
      console.log(s)
      this.$router.push(s)
    }
  }
}

When so click the left side of the menus, you can automatically switch classes and students in the MainFrm.