vue.js2.0+ElementUI后台管理系统教程：路由配置与使用

"这篇教程是关于使用vue.js2.0和ElementUI开发后台管理系统的第二部分，主要涉及vue-router的引入、配置与使用，以及基本的路由组件渲染。" 在开发基于Vue.js的后台管理系统时，路由管理和视图切换是非常关键的环节。Vue Router是Vue.js官方的路由管理器，它让我们能够方便地通过URL来控制应用的视图和状态。在本教程的第二部分，我们将深入探讨如何集成和使用vue-router。 首先，我们需要安装vue-router。在命令行中运行`cnpm install vue-router --save-dev`，这会将vue-router作为开发依赖添加到项目中。这样做的目的是确保在开发环境中使用vue-router，而不会将其包含在生产构建中。 接下来，在`main.js`文件中，我们导入Vue和Vue Router，然后使用`Vue.use(VueRouter)`注册Vue Router。这是让Vue应用支持路由功能的关键步骤。接着，我们创建一个`VueRouter`实例，并传入一个包含所有路由配置的数组。这个数组通常存储在单独的文件中，如`router-config.js`，以便于管理和维护。 在`router-config.js`文件中，我们引入需要用到的组件，例如`activePublic`，然后定义路由规则。每个路由规则由一个对象表示，包含`path`属性指定路径，以及`component`属性指定对应视图组件。例如，当URL路径为`/activePublic`时，会显示`activePublic`组件。 在`app.vue`中，我们使用`<router-view>`组件来定义路由的渲染位置。这个特殊的组件会根据当前激活的路由动态渲染对应的组件。在这里，它被放置在主内容区，即`.main-right`类的区域内。 最后，我们在`activePublic/index.vue`中编写内容，以此来测试路由配置是否正确。当访问`/activePublic`路径时，这个组件应该会被渲染出来。 总结起来，这个教程涵盖了以下几个关键知识点： 1. 安装和注册vue-router。 2. 在`router-config.js`中配置路由规则。 3. 在`main.js`中创建Vue Router实例并加载路由配置。 4. 使用`<router-view>`组件在`app.vue`中定义视图的渲染位置。 5. 测试路由配置的有效性。 理解并掌握这些步骤，开发者就能够灵活地构建具有多视图的后台管理系统，实现视图间的平滑切换。