Vue + ElementUI 实现后台管理系统模板 -- 前端篇：引入 vue-router 进行路由管理、模块化封装 axios 请求

import Vue from 'vue'
import Router from 'vue-router'
 
// 引入 ElementUI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
 
// 引入自定义组件
import Login from './views/Login.vue'
import NotFound from './views/404.vue'
import Home from './views/Home.vue'
import User from './views/system/User.vue'
import Rights from './views/system/Rights.vue'
import RightsDetail from './views/system/RightsDetail.vue'
 
// 引入自定义布局组件
import Navbar from './components/Navbar.vue'
import Sidebar from './components/Sidebar.vue'
import AppMain from './components/AppMain.vue'
 
// 使用 ElementUI
Vue.use(ElementUI)
 
// 定义路由
const routes = [
  {
    path: '/login',
    name: 'login',
    component: Login
  },
  {
    path: '/',
    name: 'Home',
    component: Home,
    redirect: '/welcome', // 重定向，默认打开welcome页面
    children: [
      { path: '/welcome', component: Welcome },
      { path: '/users', component: User },
      { path: '/rights', component: Rights },
      { path: '/rights/:id', component: RightsDetail, props: true }, // props: true 启用 props
    ]
  },
  {
    path: '/404',
    name: '404',
    component: NotFound
  },
  {
    path: '*',
    redirect: '/404'
  }
]
 
// 使用 vue-router
Vue.use(Router)
export default new Router({
  routes,
  mode: 'history', // 使用 HTML5 History 模式
  linkActiveClass: 'active' // 设置当前活跃路由的 class 名
})

在这个代码实例中，我们首先导入了Vue和vue-router，然后导入并使用了ElementUI组件库。接着定义了一系列路由，包括登录页面、主页、用户管理、权限管理等。我们使用了children属性来定义主页的子路由，并展示了如何使用props来传递动态参数。最后，我们创建并导出了一个新的Router实例，其中包含了我们定义的路由。这个实例使用了HTML5 History模式，并设置了当前活跃路由的class名为active。