vue入门 | 使用vue.js2.0 + ElementUI开发后台管理系统详细教程（二）

接上一章vue入门 | 使用vue.js2.0 + ElementUI开发后台管理系统详细教程（一）

• 在线demo
• 源码

1. 引入路由工具vue-router，切换视图

# 安装vue-router
npm install vue-router --save

2. 使用vue-router

|-- main.js
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import routeConfig from './router-config'  // 引入router-config.js文件

//加载路由中间件
Vue.use(VueRouter)

//定义路由
const router = new VueRouter({
      routes: routeConfig
})

new Vue({
  router,
  store,
  el: "#app",
  render: h => h(App)
})

3. 配置路由

在src目录下新建router-config.js，在router-cinfig.js中里面配置路由

// 引入组件
import activePublic from './page/activePublic/index.vue'

export default [
   {
        // 配置路由，当路径为'/activePublic',使用组件activePublic
        path:'/activePublic',component:activePublic,
  }
]

4. 使用路由

|--app.vue

5. 打开activePublic/index.vue文件，在页面随便写点东西，测试一下，路由是否配置成功

6. 启动项目npm run dev，看到如下页面，说明路由配置成功

step1.png

7. 接下来，在activePublic/index.vue直接调用element-ui组件，完成活动发布的首页，完成好的代码如下

  |-- activePublic/index.vue

上面这个页面又出现了一个router-view，为什么要这样放呢？因为step1、step2、step3、step4四个页面都含有顶部的"步骤"组件，所以这里把step1/2/3/4单独提出来放在4个页面中

8. 在router-config.js文件中配置二级路由

    |-- router-config.js
import activePublic from './page/activePublic/index.vue'

import step1 from './page/activePublic/step1.vue'
import step2 from './page/activePublic/step2.vue'
import step3 from './page/activePublic/step3.vue'
import step4 from './page/activePublic/step4.vue'

export default [
  {
    path:'/activePublic',component:activePublic,
    // 配置子路由
    children:[
       // 路径为'/activePublic'，使用组件step1
      { path: ''      , component: step1  },
       // 路径为'/activePublic/step1'，使用组件step1
      { path: 'step1', component: step1  },
      // 路径为'/activePublic/step2'，使用组件step2
      { path: 'step2', component: step2  },
      { path: 'step3', component: step3  },
      { path: 'step4', component: step4  }
    ]
  }
]

9. 重新启动项目cnpm run dev,在浏览器中默认路径为http://localhost:8080/#/activePublic,根据我们设置的路由规则，就会显示step1.vue页面中的内容,接着完成step1.vue，代码如下，参考element表单组件

|-- step1.vue

这个页面的大部分是使用的element组件，请自行对照官网实现。在这个页面中封装了一个二级地址选择插件，稍后会专门写一篇文章，详细介绍如何封装组件，先为大家奉上地址选择器源码。

10. 重新启动项目,npm run dev,检查页面上的功能是否都已经实现，是否有报错，如果有解决不了的bug，欢迎留言咨询。

演示 (1).gif