Vue简单实现-点击顶部导航栏动态改变左侧导航显示内容

说明：

1.不清楚这样写会不会影响性能，只是觉得这样比较简单

2.通过 兄弟组件传值 + v-if 实现

3.不改变页面地址

做出来的效果如下：

1.新建三个vue组件，其中Home是父组件，Header和BodyLeft是兄弟组件

2.在main.js中创建总线

let bus = new Vue()
Vue.prototype.bus = bus

3.编写Header.vue和BodyLeft.vue的代码，使用bus进行兄弟组件间的传值

//Header的Template：
//通过onclick点击事件传id值

  

    {{items.text}}
  


//Header的Script
//通过bus.$emit把id传到总线上



//BodyLeft的Template
//通过staticId的值决定显示哪一列

    

      

        {{item.text}}
      
    
    

      

        {{item.text}}
      
    
    

      

        {{item.text}}
      
    


//BodyLeft的Script
//通过bus.$on获取总线上的id值，同时修改staticId的值
export default {
  name: 'BodyLeft',
  data: function () {
    return {
      staticId: 0,
      index: [{
        id: 0,
        text: '首页'}],
      sys: [
        {
          id: 11,
          text: '角色权限设置'
        }, {
          id: 12,
          text: '操作员设置'
        }, {
          id: 13,
          text: '系统日志'
        }],
      cam: [
        { id: 21,
          text: '企业信息设置'
        },
        { id: 22,
          text: '部门管理'
        },
        { id: 23,
          text: '职务设置'
        },
        { id: 24,
          text: '员工管理'
        }]
    }
  },
  created: function () {
    this.bbtn()
  },
  methods: {
    bbtn: function () {
      this.bus.$on('sendId', (id) => { this.staticId = id })
    }
 }

4.在Home.vue中注册这两个子组件即可