vue-cli3 + elementui 搭建后台管理界面(三)-侧边栏菜单

ゞ浴缸里的玫瑰 2021-09-10 06:46 403阅读 0赞

上一节搭好了主框架，但是标签页和侧边栏只是分别展示了各自的菜单，如何将二者联动起来？  
定义路由规则：当有 children 属性时，从 children 里取出 path 填充到侧边栏

## 1 新增组件 ##

新增 **views/dashboard/index.vue**

<template>
      <div>dashboard</div>
    </template>

**views/article/index.vue**

<template>
      <div>Article</div>
    </template>

## 2 修改路由 ##

修改 **src/router/index.js** :

import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Login from '../views/Login'
    import Dashboard from '../views/dashboard'
    import Article from '../views/article'
    import Container from '../components/Container'
    
    Vue.use(VueRouter)
    
    const routes = [
      {
        path: '/',
        redirect: '/dashboard',
        name: 'Container',
        component: Container,
        children: [
          {
            path: 'dashboard', 
            name: '首页', 
            component: Dashboard,
          },
          {
            path: 'article', 
            name: '文章', 
            component: Article, 
          },
        ]
      },
      {
        path: '/login',
        name: 'Login',
        component: Login
      }
    ]
    
    const router = new VueRouter({
      mode: 'history',
      base: process.env.BASE_URL,
      routes
    })
    
    export default router

## 3 页面主框架 ##

修改 **src/components/Container.vue**

<template>
      <div class="app">
        <el-container>
          <el-aside class="app-side app-side-left" :class="isCollapse ? 'app-side-collapsed' : 'app-side-expanded'">
            <div class="app-side-logo">
              <img src="@/assets/logo.png"/>
            </div>
            <div class="app-side-content">
              <el-menu :default-active="defaultActive"
                       router
                       class="el-menu-vertical-demo"
                       @open="handleOpen"
                       :collapse="isCollapse">
                <template v-for="route in routes" >
                  <template v-if="route.children && route.children.length">
                    <el-menu-item v-for="item in route.children"
                                  :key="route.path + '/' + item.path"
                                  :index="item.path"
                      >
                      <i class="el-icon-menu"></i>
                      <span slot="title">{{ item.name }}</span>
                    </el-menu-item>
                  </template>
                </template>
              </el-menu>
            </div>
          </el-aside>
    
          <el-container>
            <el-header class="app-header">
              <div class="app-side-fold"
                   @click.prevent="toggleSideBar">
                <i v-show="!isCollapse" class="el-icon-s-fold"></i>
                <i v-show="isCollapse" class="el-icon-s-unfold"></i>
              </div>
              <el-menu default-active="/"
                       router
                       class="el-menu-demo tab-page"
                       mode="horizontal"
                       @select="handleSelect"
                       active-text-color="#409EFF">
                <el-menu-item index="/">首页</el-menu-item>
              </el-menu>
    
              <div class="app-header-userinfo">
                <el-dropdown trigger="hover"
                             :hide-on-click="false">
                  <span class="el-dropdown-link">
                    {{ username }}
                    <i class="el-icon-caret-bottom el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>我的消息</el-dropdown-item>
                    <el-dropdown-item>设置</el-dropdown-item>
                    <el-dropdown-item divided
                                      @click.native="logout">退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </el-header>
    
            <el-main class="app-body">
              <template>
                <router-view/>
              </template>
            </el-main>
          </el-container>
        </el-container>
      </div>
    </template>
    
    <script>
    export default {
      name: 'Container',
      data () {
        return {
          username: '',
          isCollapse: false,
        }
      },
      computed: {
        // 获取route路由
        routes () {
          return this.$router.options.routes
        } 
      },
      methods: {
        toggleSideBar () {
          this.isCollapse = !this.isCollapse
        },
        logout () {
          this.$confirm('确认退出?', '提示', {})
            .then(() => {
              sessionStorage.removeItem('user');
              this.$router.push('/login');
            })
            .catch(() => { });
        },
        handleOpen (key, keyPath) {
          console.log(key, keyPath);
        },
        handleClose (key, keyPath) {
          console.log(key, keyPath);
        },
        handleSelect (key, keyPath) {
          console.log(key, keyPath);
        },
      },
      mounted () {
        let user = sessionStorage.getItem('user');
        if (user) {
          this.username = user;
        }
      },
    }
    </script>
    
    <style lang="scss">
    ...

此时的页面:

![6587214-7c64d8600d061208.png][]

2.png

![6587214-1681d38a0a23cb86.png][]

3.png

文章改编自大神博客：[https://www.cnblogs.com/wbjxxzx/p/9943049.html][https_www.cnblogs.com_wbjxxzx_p_9943049.html]，仅作为学习实践。

[6587214-7c64d8600d061208.png]: /images/20210804/98aa1dcbe74941039bd7a5736490f866.png
[6587214-1681d38a0a23cb86.png]: /images/20210804/3f6c664ae70e4f899761058aae473823.png
[https_www.cnblogs.com_wbjxxzx_p_9943049.html]: https://links.jianshu.com/go?to=https%3A%2F%2Fwww.cnblogs.com%2Fwbjxxzx%2Fp%2F9943049.html