Vue中使用vuex实现el-tab的路由跳转以及样式回显

一、给vue中引入vuex

npm install vuex --save

二、使用vuex中store

1.引入vuex以及store

找到vue项目中的main.js文件引入store

// 引入vuex
import Vuex from 'vuex'
// 引入store (后面我们需要自建这个文件)
import store from './store'
// 使用vuex
Vue.use(Vuex)

new Vue({
  router,
  // 加入store
  store,
  render: h => h(App)
}).$mount('#app')

2.创建store文件夹

在项目的src下创建store文件夹

创建index.js 与 tab.js文件

3. 书写index.js

import Vue from 'vue'
import Vuex from 'vuex'
import tab from '../store/tab'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    tabs
  }
})

4.书写tab.js文件

/**
 * 数据源  相当于组件中的data
 * @type {{state: {tabList: [], currentMenu: {}, menu: []}}}
 */
const state = {
  tabList: []
}

/**
 * 组件中的方法 methods
 * @type {{selectMenu(*, *=): void, closeTab(*, *): void}}
 */
const mutations = {
  selectMenu (state, val) {
    state.currentMenu = val
    const result = state.tabList.findIndex(item => item.path === val.path)
    result === -1 ? state.tabList.push(val) : ''
  },
  closeTab (state, val) {
    const result = state.tabList.findIndex(item => item.path === val.path)
    state.tabList.splice(result, 1)
  }
}

export default {
  state,
  mutations
}

三、页面使用

1.如何做到样式回显

首先了解el-menu标签回显选中样式控制的属性

default-active // default-active属性的值与导航中el-menu-item中的菜单选中index属性赋值的路径相同即可做的样式选中回显

在了解一下el-tab标签回显选中样式控制的属性

v-model //v-model属性的值与el-tab-pane中的name属性相同即可做的样式选中回显

这样我们知道当我们点击导航栏时,我们至少需要获取到的数据

{
  message： '导航名称',
  path: '导航路径',
  name: 'name标识'
}

2.el-menu传值

我们需要给导航栏一个单击事件 触发事件时将值传递给我们tab中的state中的tabList集合添加值

// 这里的menuList就是根据上个步骤中做的假数据进行循环赋值
<el-menu
  :default-active="defaultActiveValue"
  background-color="#545c64"
  text-color="#fff"
  router
  active-text-color="#ffd04b">
  <el-submenu :index="item.path" v-for="item in menuList" :key="item.message">
    <template slot="title">
      <i :class="item.icon"></i>
      <span>{{ item.message }}</span>
    </template>
    <!-- menuClick()单击事件拿到我们需要的值 -->
    <el-menu-item :index="child.path" v-for="child in item.children" :key="child.path" @click="menuClick(child)">
      <i :class="child.icon"></i>
      {{ child.message }}
    </el-menu-item>
  </el-submenu>
</el-menu>
<script>
export default {
  data() {
    return {
      menuList: [{假数据},{假数据}]
    }
  },
  methods: {
    // 导航栏单机事件
    menuClick (child) {
      // selectMenu使我们在tab.js中定义的方法 用于添加进tab中tabList集合方法
      this.$store.commit('selectMenu', child)
    }
  }
}
</script>

3.el-tabs的传值与回调

<el-main>
  <el-tabs v-model="editableTabsValue" type="card">
  <!-- tabs是我们从tab.js中拿到的tabsList -->
    <el-tab-pane
      v-for="item in tabs"
      :name="item.name"
      :key="item.path"
      :label="item.message">
    </el-tab-pane>
  </el-tabs>
  <!-- 路由跳转页签 -->
  <router-view></router-view>
</el-main>

export default {
// 引入vuex中的mapSta
 import { mapState } from 'vuex'
 // 使用computed监听
  computed: {
  // 用ES6的对象扩展符合并computed 拿到tabList
    ...mapState({
      tabs: state => state.tabs.tabList
    })
  }
}

<el-main>
<!-- remove关闭方法 changTab选中tab页签事件  -->
  <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" @tab-click="changTab">
  <!-- tabs是我们从tab.js中拿到的tabsList -->
    <el-tab-pane
      v-for="item in tabs"
      :name="item.name"
      :key="item.path"
      :label="item.message">
    </el-tab-pane>
  </el-tabs>
  <!-- 路由跳转页签 -->
  <router-view></router-view>
</el-main>

export default {
// 引入vuex中的mapSta
 import { mapState } from 'vuex'
 // 使用computed监听
  computed: {
  // 用ES6的对象扩展符合并computed 拿到tabList
    ...mapState({
      tabs: state => state.tabs.tabList
    })
  },
  methods: {
  // tab关闭方法
    removeTab (targetName) {
	  // 关闭事件只能拿到当前关闭tab当前的name属性
	  // 通过遍历tab拿到对应的对象
      const tab = this.tabs.find(item => item.name === targetName)
      // tab.js中的删除方法
      this.$store.commit('closeTab', tab)
    },
    // tab点击选中事件
    changTab (data) {
      // 拿到当前tab页签的数据 根据name拿到对象
      const tab = this.tabs.find(item => item.name === data.name)
      this.$router.push(tab.path)
      this.$store.commit('selectMenu', tab)
      // defaultActiveValue 与 tab.path相等 导航栏选中样式回显
      this.defaultActiveValue = tab.path
    }
  }
}

最后将我们在上面第2步中menuClick方法加入代码 让tab也拿到样式回显

this.editableTabsValue = child.name