vue后台管理系统开发流程全记录(四)_侧边栏实现原理及配置 | 路由配置

一 项目分析

项目本身带有一个侧边栏，点击可以跳转到预制好的默认页面，但这不是我们需要的，我们首先的任务是更改侧边栏内容，再让它指向我们自己的页面。

首先我们打开侧边栏所在的文件，找到它的内容来源。

// src>layout>components>Sidebar>index.vue
<template>
  <div :class="{'has-logo':showLogo}">
    <logo v-if="showLogo" :collapse="isCollapse" />
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu
        :default-active="activeMenu"
        :collapse="isCollapse"
        :background-color="variables.menuBg"
        :text-color="variables.menuText"
        :unique-opened="false"
        :active-text-color="variables.menuActiveText"
        :collapse-transition="false"
        mode="vertical"
      >
        <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
      </el-menu>
    </el-scrollbar>
  </div>
</template>

可以看到，该模板文件的内容主体的一个logo组件和一个sidebar-item组件，logo组件在前面已讲过了，是可配置的，这边也可以看到是通过变量showLogo控制的。sidebar-item组件是一个使用了for循环的组件，不难想到应该就是侧边栏选项了。

该组件是根据routes循环的，取到了routes的子项赋给route并将route绑定到子组件，应该是要在子组件中使用的。

打开子组件文件，果然子组件中引入了绑定的属性，获得了对象route。

// src>layout>components>Sidebar>SidebarItem.vue
props: {
   
    // route object
    // :item="route" :base-path="route.path"
    item: {
   
      type: Object,
      required: true
    },
	... ...
    basePath: {
   
      type: String,
      default: ''
    }
  },

点进SidebarItem.vue看一下，内部根据item.children的情况分为两部分，通过页面也可以看到，有的导航点击会展开下拉框，有的则无。

对应的页面引入了两个组件，item组件为导航栏菜单组件，sidebar-item为导航栏下拉框也就是二级导航组件。

可以看到item中绑定了icon和title属性用来传入变量，传入的变量来源是item.meta.icon和item.meta.title，item变量即外层传入的route对象经过变换取得。

综上，要修改导航栏，只要修改route对象中的meta和rpath即可。

再回到外层，可以看到，routes其实是取自路由文件。 this.$router 相当于一个全局的路由器对象,包含了很多属性和对象。

this.$router.options.routes其实就是我们定义的路由对象。

打开router文件，可以看到路由对象中，只有单层children的与导航栏中无下拉框对应，多层children的，内层会再下拉框中展示。

在路由对象中，我们看到meta项，修改该项即可。

二 代码展示

{
   
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
   
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: {
    title: '内容管理', icon: 'dashboard' }
    }]
},

按照需要将路由全部配置完成即可。