如何使用Vue在点击左侧导航栏el-menu后实现el-main的动态页面切换

一、在main.js中引入路由，代码如下：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import Container from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';


Vue.use(ElementUI)
Vue.use(Container)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App},
  template: '<App>'
})

二、在App.vue中，添加跳转路由，代码如下：

<template>
  <div id="app">
    <el-container>
      <el-header class="el-header" style="background-color: black">
        <home-header></home-header>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <!--引入自定义左侧菜单栏-->
          <left-menu></left-menu>
        </el-aside>
        <el-main>
          <!--引入跳转路由-->
          <router-view ></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  import HomeHeader from './components/Header'
  import LeftMenu from './components/LeftMenu'

  export default {
    name: "App",
    components: {
      HomeHeader,
      LeftMenu
    }
  }
</script>

<style>
</style>

三、左侧导航菜单栏配置，代码如下：

<template>
  <el-row>
    <el-col>
      <el-menu
        class="el-menu-vertical-demo"
           background-color="#E9EEF3"
           text-color="black" router>
            <el-submeu index="1" >
            <template slot="title"><i class="el-icon-message"></i>导航一</template>
            <el-menu-item-group>
              <!--<template slot="title">分组一</template>-->
              <!--设置index-->
              <el-menu-item index="/ceshi1">测试1</el-menu-item>
              <el-menu-item index="/ceshi2">测试2</el-menu-item>
              <!--<el-menu-item-group title="分组2">-->
              <el-menu-item index="/ceshi3">测试3</el-menu-item>
              <el-menu-item index="/ceshi4">测试4</el-menu-item>
              <!--
              <el-submenu index="1-4">
                <template slot="title">测试5</template>
                <el-menu-item index="1-4-1">选项4-1</el-menu-item>
              </el-submenu>
              -->
            </el-menu-item-group>
          </el-submeu>
        </el-menu>
    </el-col>
  </el-row>
</template>

<style>
  .el-menu-vertical-demo{
    height: 645px
  }
</style>

<script>
  export default {
    name: 'LeftMenu',
    };
</script>

四、在index.js中配置路由，代码如下：

import Vue from 'vue'
import Router from 'vue-router'
import VehicleRegister from '../components/ceshi1'
import VehAntiActivation from '../components/ceshi2
import VehicleChange from '../components/ceshi3
import VehicleActivate from '../components/ceshi4'


Vue.use(Router)

export default new Router({
  //去掉浏览器后面的“#”
  mode: 'history',
  routes: [
    {
      path: '/ceshi1',
      name: 'ceshi1',
      component: ceshi1
    },
    {
      path: '/ceshi2',
      name: 'ceshi2',
      component: ceshi2
    },
    {
      path: '/ceshi3',
      name: 'ceshi3',
      component: ceshi3
    },
    {
      path: '/ceshi4',
      name: 'ceshi4'
      component: ceshi4
    }
  ]
})

五、实现效果

image.png

image.png