资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

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

在上篇文章给大家介绍了使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)

创新互联建站专注于仁布网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供仁布营销型网站建设,仁布网站制作、仁布网页设计、仁布网站官网定制、微信小程序定制开发服务,打造仁布网络公司原创品牌,更为您提供仁布网站排名全网营销落地服务。

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

# 安装vue-router
cnpm install vue-router --save-dev

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. 启动项目cnpm run dev,看到如下页面,说明路由配置成功

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

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

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

以上所述是小编给大家介绍的使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持!


文章题目:使用vue.js2.0+ElementUI开发后台管理系统详细教程(二)
链接URL:http://cdkjz.cn/article/gcgsde.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220