后台管理的系统_首页-侧边栏

今天来复习首页侧边栏的制作

侧边栏样式

​ 侧边栏主要采用element进行开发，

布局样式

​ 布局样式就是简单采用Element中的布局样式，里面的内容我就不添加，太多了,这里的aside就是侧边栏，

<el-container>
  <el-aside width="200px">Aside</el-aside>
  <el-container>
    <el-header>Header</el-header>
    <el-main>Main</el-main>
  </el-container>
</el-container>

​ 侧边栏主要的结构内容，首先来看default-active="/index"， 这个是，默认用户打开网站后，首选展示的界面 ， 如果这里要切换的话， 需要和router里面的路由重定向一切切换，代码在下面。在这里后面记得写route 否则这里不会生效

​ 其中很重要的就是配置路由我们配置在home界面的里面 , 注意这里的children 就是在某个主页面的内进行添加其他页面路由

 {
    path: "/home",
    name: "home",
    component: HomeView,
    // 路由重定向
    // 注意这里只会生效最后一个
    redirect: "/index",
    // redirect: "/list",
    // 变成他的元素
    children: [
      {
        path: "/user",
        name: "user",
        component: UserView,
        meta: {
          name: "用户管理",
        },
      },
      {
        path: "/index",
        name: "index",
        component: IndexView,
        meta: {
          name: "系统首页",
        },
      },
      {
        path: "/list",
        name: "list",
        component: ListView,
        // 路由重定向

        meta: {
          name: "手机列表",
        },
      },
      {
        path: "/modify/:id",
        name: "modify",
        component: ModifyView,
        meta: {
          name: "修改手机",
        },
      },
      {
        path: "/phones",
        name: "phones",
        component: PhonesViewVue,
        meta: {
          name: "手机数据",
        },
      },

      {
        path: "/analysis",
        name: "analysis",
        component: AnalysisView,
        meta: {
          name: "数据分析",
        },
      },
    ],
  },

​ 最后里面的item="/" 这里的填写的就是路由地址了，你想跳转哪里就填写哪里就好了，title就是文字

<el-menu default-active="/index" class="el-menu-vertical-demo" background-color="#003472" text-color="#fff"
          active-text-color="#ffd04b" router>
          <el-menu-item index="/index">
            <i class="el-icon-s-home"></i>
            <span slot="title">系统首页</span>
          </el-menu-item>
          <el-submenu index>
            <template slot="title">
              <i class="el-icon-phone"></i>
              <span>手机管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/list">
                <template slot="title">
                  <i class="el-icon-folder-opened"></i>
                  <span>手机列表</span>
                </template>
              </el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item index="/analysis">
                <template slot="title">
                  <i class="el-icon-edit"></i>
                  <span>数据分析</span>
                </template>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item index="/user">
            <i class="el-icon-user-solid"></i>
            <span slot="title">用户管理</span>
          </el-menu-item>
        </el-menu>

    //router界面，路由重定向

	path: "/home",
    name: "home",
    component: HomeView,
    // 路由重定向
    // 注意这里只会生效最后一个
    redirect: "/index",
    // redirect: "/list",

侧边栏主要的开发就搞定了，如果代码有任何问题，请积极评论，或者私信我