AntDesign vue学习笔记（三）嵌套路由使用

本项目目前结构如下

1、Login页面=》MainFrm页面=》MainFrm左部菜单，右边是显示区域可以切换子页面。

2、当点击左部菜单时，右边的子页面随着进行切换。

 

实现关键代码如下
1、修改router下的index.js

export default new Router({
  routes: [
    {
      path: '/',
      name: '登录',
      component: Login
    }
    {
      path: '/MainFrm',
      name: '首页',
      component: MainFrm,
      children: [
        {
          path: '/StudentClass',
          name: '班级',
          component: StudentClass
        },
        {
          path: '/Student',
          name: '学生',
          component: Student
        }
      ]
    }
  ]
})

2、在MainFrm中修改代码如下，a-layout为antdesign布局写法，a-menu为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;">
            管理员名称
            <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')">学生</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、修改export default如下

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

这样点击左部菜单时，就可以自动在MainFrm中切换班级和学生了。