Vue+Element-UI 构建侧边栏菜单与标签页联动体验

2024-01-02 10:47:08

引言

侧边栏菜单和标签页是前端开发中的常见组合，它们可以帮助用户轻松浏览和切换页面，尤其适用于单页应用 (SPA)。本文将利用 Vue.js 和 Element-UI 两个流行的框架，一步步实现侧边栏菜单与标签页的联动效果。

构建应用

准备工作
- 安装 Vue.js 和 Element-UI。
- 创建 Vue 项目。
配置路由
- 使用 Vue-Router 进行路由管理。
- 定义菜单项目和相应的路由路径。
构建侧边栏菜单
- 使用 Element-UI 的 el-menu 组件创建侧边栏菜单。
- 将菜单项与路由路径关联，实现点击菜单项跳转到对应页面的功能。
构建标签页
- 使用 Element-UI 的 el-tabs 组件创建标签页。
- 将路由路径与标签页关联，实现页面切换时自动切换标签页的功能。
联动侧边栏菜单与标签页
- 利用 Vue.js 的路由钩子函数，监听路由切换事件。
- 在路由切换时，更新侧边栏菜单的激活状态和标签页的当前选项卡。

实战演练

1. 配置路由

// src/router/index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});

export default router;

2. 构建侧边栏菜单

<!-- src/components/Sidebar.vue -->
<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-vertical-demo"
    @select="handleSelect"
  >
    <el-menu-item index="/" icon="el-icon-house">
      首页
    </el-menu-item>
    <el-menu-item index="/about" icon="el-icon-info">
      关于
    </el-menu-item>
  </el-menu>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['activeIndex'])
  },
  methods: {
    handleSelect(index) {
      this.$router.push(index);
    }
  }
};
</script>

3. 构建标签页

<!-- src/components/Tabs.vue -->
<template>
  <el-tabs v-model="activeIndex">
    <el-tab-pane label="首页" name="/">
      <Home />
    </el-tab-pane>
    <el-tab-pane label="关于" name="/about">
      <About />
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['activeIndex'])
  },
  watch: {
    activeIndex(val) {
      this.$router.push(val);
    }
  }
};
</script>

4. 联动侧边栏菜单与标签页

// src/store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    activeIndex: '/'
  },
  mutations: {
    setActiveIndex(state, index) {
      state.activeIndex = index;
    }
  }
});

export default store;

// src/router/index.js
import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
  // ...
];

const router = new VueRouter({
  // ...
  beforeEach(to, from, next) {
    store.commit('setActiveIndex', to.fullPath);
    next();
  }
});