elementUI组件库---动态设置el-menu导航当前选中项

1、引入扩展库vuex

import Vuex from 'vuex'
Vue.use(Vuex)

2、注册新Store

const store = new Vuex.Store({ 
    state:{ 
        adminleftnavnum:"1" // 管理后台左侧导航栏 
        } 
    })

3、创建和挂载根实例

new Vue({ 
    el: '#app', 
    router, 
    store, 
    render: h => h(App) })

4、在导航所在的组件设置

1）设置el-menu的active

<el-menu :default-active="navselected" :active="navselected" @select="selectItems">

2）方法

//store.state.adminleftnavnum里值变化的时候，设置navselected 
getNavType(){ 
    this.navselected=this.$store.state.adminleftnavnum; 
    }, 
  
  
//按钮选中之后设置当前的index为store里的值。 
selectItems(index){ 
    this.$store.state.adminleftnavnum=index; 
    } 
 ... 
    
 watch: { 
     // 监测store.state 
     '$store.state.adminleftnavnum': 'getNavType' 
     }

5、在其他组件改变this.$store.state.adminleftnavnum的值即可

export default { 
    created () { 
        this.$store.state.adminleftnavnum="2"; //设置左侧导航2 active 
        } 
      }