AntDesign vue学习笔记(四)使用组件切换

同样实现上一篇功能,

改为使用组件切换,实现方法如下

 1、修改MainFrm中的<router-view/>如下代码

2、注册局部组件

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

3、修改菜单点击代码

 <a-sub-menu key="sub3">
   <span slot="title">
    <a-icon type="pie-chart"/>学生
   </span>
   <a-menu-item key="7" @click="menu('Student)">学生</a-menu-item>
 </a-sub-menu>

即可实现切换

猜你喜欢

转载自www.cnblogs.com/zhaogaojian/p/11096004.html
今日推荐