AntDesign vue學習筆記（三）嵌套路由使用

本項目目前結構以下

一、Login頁面=》MainFrm頁面=》MainFrm左部菜單，右邊是顯示區域能夠切換子頁面。

二、當點擊左部菜單時，右邊的子頁面隨着進行切換。

 

實現關鍵代碼以下
一、修改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
        }
      ]
    }
  ]
})

二、在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>

三、修改export default以下

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

這樣點擊左部菜單時，就能夠自動在MainFrm中切換班級和學生了。