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

在上篇文章给大家介绍了

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

2. 使用vue-router

h(App) })

3. 配置路由

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

4. 使用路由

...

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

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

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

预览 上一步

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

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

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',// 配置子路由 children:[ // 路径为'/activePublic'，使用组件step1 { path: '',component: step1 },// 路径为'/activePublic/step1'，使用组件step1 { path: 'step1',// 路径为'/activePublic/step2'，使用组件step2 { path: 'step2',component: step2 },{ path: 'step3',component: step3 },{ path: 'step4',component: step4 } ] } ]

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

step1.vue

rush:js;">

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

10. 重新启动项目,cnpm run dev,检查页面上的功能是否都已经实现，是否有报错，如果有解决不了的错误，欢迎留言咨询，我会第一时间为您解答。

以上所述是小编给大家介绍的使用vue.js2.0 + ElementUI开发后台管理系统详细教程（二）。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。