vue点击路由跨多组件切换el-tabs选项卡

解决方案：将el-tabs的v-model属性通过computed与vuex的state绑定，使用vuex跨组件传参

1.安装vuex

关于vuex的安装和使用可以看一下这个，不看也行，装上vuex就行

http://t.csdnimg.cn/sx9B1

2.将el-tabs的v-model属性绑定在computed上

注意：不要把activeName绑到data上，见http://t.csdnimg.cn/J9GFt

<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  computed: {
    activeName: {
      get() {
        return this.$store.state.active;
      },
    },
  },
};
</script>

3.编写vuex文件

vuex在项目中使用

大致有两种（实质上一样）：

• 1.vuex/store.js 创建vuex文件夹，将代码放进store.js中
• 2.store/index.js 创建store文件夹，将代码放进index.js中

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);
const state = {
  active: "biographicalNotes",
};
const actions = {
  updateActive({ commit }, payload) {
    commit("UPDATE_Active", payload);
  },
};
const mutations = {
  UPDATE_Active(state, payload) {
    state.active = payload;
  },
};
const store = new Vuex.Store({
  mutations,
  actions,
  state,
}); // 这里可以添加state、mutations等属性

export default store;

4.路由组件处设置点击事件

因为是路由,点击事件需要加上.native才生效,在脚本处引入点击事件

<router-link to="/tabs" @click.native="UPDATE_Active('first')">第一个</router-link>
<router-link to="/tabs" @click.native="UPDATE_Active('second')">第二个</router-link>
<router-link to="/tabs" @click.native="UPDATE_Active('first')">第三个</router-link>
<router-link to="/tabs" @click.native="UPDATE_Active('first')">第四个</router-link>

<script>
import { mapMutations } from "vuex";
export default {
  methods: {
    ...mapMutations(["UPDATE_Active"]),
  },
};
</script>