elementUI官网

一个导航栏组件，若干个它的子组件，也就是右边的内容组件

我这里准备了五个子组件

1、首先看home.vue组件（导航栏组件）

<template>
    <el-container>
        <el-aside width="15%">
                <div class="menu">
                    <el-menu
                        default-active="2"
                        class="el-menu-vertical-demo"
                        background-color="#afc5e2"
                        text-color="#fff"
                        @select="changeSidebar"
                        active-text-color="#ffd04b">

                        <el-menu-item index="MyMessage">
                             <i class="el-icon-s-custom"></i>
                            <span slot="title">个人中心</span>
                        </el-menu-item>
                    <el-menu-item index="Order">
                        <i class="el-icon-s-claim"></i>
                        <span slot="title">我的订单</span>
                    </el-menu-item>
                    <el-menu-item index="Preferred">
                        <i class="el-icon-s-shop"></i>
                        <span slot="title">今日优选</span>
                    </el-menu-item>
                    <el-menu-item index="SecKill">
                        <i class="el-icon-chat-dot-square"></i>
                        <span slot="title">秒杀活动</span>
                    </el-menu-item>
                    <el-menu-item index="Inform">
                        <i class="el-icon-message-solid" ></i>
                        <span slot="title">店铺消息</span>
                    </el-menu-item>
                    </el-menu>
                </div>
        </el-aside>
        <el-container>
            <el-header>欢 迎 使 用 电 商 系 统</el-header>
            <el-main>
                <!-- 仔细看，核心在这，这里是路由的出口-->
                <router-view></router-view>
            </el-main>
        </el-container>
</el-container>
</template>

<script>
  export default {
      data() {
          return {
              
          }
      },

    mounted() {
        this.sidebarItem = this.$route.name;
    },
    methods: {
        changeSidebar(path) {
            this.$router.push(path);
        },
    }
    
  }
</script>
 

 <style scoped>
    .menu{
        height: 730px;
        background-color:  #afc5e2;
    }
    .el-header {
    background-color: #afc5e2;
    color: #333;
    font-size:30px;
    text-align: center;
    line-height: 60px;
  }
    .el-aside {

    color: #333;
    text-align: center;
    line-height: 900px;
  }

  .el-main {
    background-color: #cfebe43f;
    color: #333;
    /* text-align: center; */
    line-height: 160px;
    padding: 0px ! important;
  }
 </style>

仔细看上边的导航栏，都有一个index属性（原本是数值，我自己改了）

<el-menu-item index="MyMessage">
                             <i class="el-icon-s-custom"></i>
                            <span slot="title">个人中心</span>
  </el-menu-item>

给导航栏绑定一个@select

 

 

 上面的方法是用来实现页面路由的跳转

好了，home部分就配置结束了

路由配置

找到router下的index.js文件，按照下面配置

1、导入组件

2、注册组件路径

3、在home下面配置子组件

import Vue from 'vue'
import Router from 'vue-router'

import Index from '@/Login/Index'
import home from '@/pages/home'
import Preferred from '@/pages/Preferred'
import Order from '@/pages/Order'
import SecKill from '@/pages/SecKill'
import Inform from '@/pages/Inform'
import MyMessage from '@/pages/MyMessage'


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'index',
      component: Index
    },
    {
      path:'/home',
      name:'home',
      component:home,
      redirect: {name: "Preferred"},   //输入路由home会重定向到Preferred页面(一进来显示的页面)
      children:
      [
        {
          path: "/Preferred",
          name: "Preferred",
          component: Preferred,
          meta: {
            title: "优选"
          }
        },
        {
          path: "/Order",
          name: "Order",
          component: Order,
          meta: {
            title: "订单"
          }
        },
        {
          path: "/SecKill",
          name: "SecKill",
          component: SecKill,
          meta: {
            title: "秒杀"
          },
        },
        {
          path: "/Inform",
          name: "Inform",
          component: Inform,
          meta: {
            title: "店铺信息"
          }
        },
          {
            path: "/MyMessage",
            name: "MyMessage",
            component: MyMessage,
            meta: {
              title: "我的信息"
            }
          }
      ]
    },
  ]
})

此处的nane就是在home中菜单的index属性，需要一一对应

好了，配置就结束了

各位给个赞咯