第12讲：ElementUI+Vue路由综合案例

在这个案例中，我们将使用ElementUI和Vue来创建一个简单的用户管理界面。这个界面将包含用户列表和用户编辑的功能。

首先，确保你已经安装了Vue和ElementUI。

npm install vue
npm install element-ui

接下来，创建一个Vue项目并引入ElementUI。

// main.js
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'
 
Vue.use(ElementUI)
 
new Vue({
  el: '#app',
  render: h => h(App)
})

在App.vue中，我们将设置基本的布局和路由：

<!-- App.vue -->
<template>
  <el-container style="height: 100vh;">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <el-menu :default-openeds="['1']" :default-active="activeRoute" router>
        <el-submenu index="1">
          <template slot="title"><i class="el-icon-user"></i>用户管理</template>
          <el-menu-item index="users">用户列表</el-menu-item>
          <el-menu-item index="create-user">创建用户</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
</template>
 
<script>
export default {
  data() {
    return {
      activeRoute: window.location.pathname
    };
  },
  watch: {
    '$route'(to, from) {
      this.activeRoute = to.path;
    }
  }
};
</script>

最后，我们需要定义用户列表和用户创建的组件，并在路由中配置它们。

// users.js
export default {
  template: `<div>用户列表</div>`
};
 
// createUser.js
export default {
  template: `<div>创建用户</div>`
};
 
// router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Users from './components/users';
import CreateUser from './components/createUser';
 
Vue.use(VueRouter);
 
const routes = [
  { path: '/users', component: Users },
  { path: '/create-user', component: CreateUser }
];
 
const router = new VueRouter({
  mode: 'history',
  routes
});
 
export default router;

在main.js中引入router：

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
 
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

这样就完成了一个简单的ElementUI和Vue结合的路由案例。在实际开发中，你需要根据具体需求来扩展用户列表和用户创建的功能，比如添加数据获取、表单验证等。