web左侧菜单页面跳转

以下是使用ElementUI中的Container 布局容器、NavMenu 导航菜单和Tabs 标签页配合Vue的Router路由实现左侧菜单页面跳转的方法：

1. 在Vue项目中安装ElementUI组件库：

npm i element-ui -S

2. 在main.js中引入ElementUI和VueRouter：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'
import router from './router'

Vue.use(ElementUI)
Vue.use(router)

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

3. 在router.js中配置路由：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

4. 在App.vue中使用Container、NavMenu和Tabs组件：

<template>
  <div id="app">
    <el-container>
      <el-aside width="200px">
        <el-menu :default-openeds="['1']" class="el-menu-vertical-demo" @select="handleSelect">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>导航一</span>
            </template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="/home">选项1</el-menu-item>
              <el-menu-item index="/about">选项2</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header style="height: 60px; line-height: 60px; text-align: center; font-size: 20px;">Header</el-header>
        <el-main>
          <el-tabs v-model="activeIndex" @tab-click="handleClick">
            <el-tab-pane label="首页" name="/home"></el-tab-pane>
            <el-tab-pane label="关于" name="/about"></el-tab-pane>
          </el-tabs>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      activeIndex: '/home'
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      this.$router.push(key)
    },
    handleClick(tab) {
      this.$router.push(tab.name)
    }
  }
}
</script>

5. 在Home.vue和About.vue中添加内容：

<template>
  <div class="home">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<template>
  <div class="about">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'About',
  data() {
    return {
      msg: 'This is an about page'
    }
  }
}
</script>